将答案键数组与输入答案进行比较

这是我使用HTML/Javascript的第一天。我刚才做了一些Java。我正在尝试做一个测试，从下拉列表中获得答案，并将其与答案键进行比较。我尝试了太多的事情，甚至记不清了。如有任何帮助，我们将不胜感激。具体来说，我不知道如何比较两个数组中的每个元素。我相信除了数组之外还有很多错误。我我在谷歌上搜索了4个小时的答案，一无所获。这是我到目前为止的代码：

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Critical Device Test</h1>
<p>Please match the letter to the corresponding answer.<p>
<br>
<br>
<img src="https://i.imgur.com/kDHijRv.jpg" alt="Proton Source CD's" width = 300 height = 200>
<br>
<label for="Q1">A:</label>
<select id="Q1" class="Q">
<option value="0">SELECT</option>
<option value="1">L:CRDEV</option>
<option value="2">L:CDC</option>
<option value="3">L:LINCDC</option>
<option value="4">L:LINAC</option>
</select>
<br>
<label for="Q2">B:</label>
<select id="Q2" class="Q">
<option value="0">SELECT</option>
<option value="1">n1</option>
<option value="2">n2</option>
<option value="3">n3</option>
<option value="4">n4</option>
</select>
<br>
<label for="Q3">C:</label>
<select id="Q3" class="Q">
<option value="0">SELECT</option>
<option value="1">e1</option>
<option value="2">e2</option>
<option value="3">e3</option>
<option value="4">e4</option>
</select>
<br>
<br>
<button onclick="myFunc()">Click me</button>
<script>
var q1 = document.getElementById("Q1");
var valueQ1=q1.options[q1.selectedIndex].value
var q2 = document.getElementById("Q2");
var valueQ2=q2.options[q2.selectedIndex].value
var q3 = document.getElementById("Q3");
var valueQ3=q3.options[q3.selectedIndex].value
var array ans = [1,2,3]
var array inpans = [valueQ1,valueQ2,valueQ3]
var counter = 0;
var count = 0;
function myFunc(){
while (count<ans.length){
if(ans[count]==inpans[count])
{
counter ++;
count ++;
}else {
counter = counter;
count ++,
}
}
document.getElementById("one").innerHTML = "You got " + counter + " right.";
}
</script>
<p id="one"></p>
</body>
</html>

您有许多问题需要修复：

您的HTML无效。您没有关闭第11行的<p>标签：

<p>Please match the letter to the corresponding answer.</p> <!-- <-- close this -->

您的代码中有许多语法错误。每当代码不起作用时，首先应该查找的就是语法错误。语法错误可以通过浏览器控制台识别。第一个语法错误出现在第58行和第59行。var关键字后面应该只有一个变量名(标识符(：
```
var ans = [1, 2, 3]; // <-- used to be: var array ans
var inpans = [valueQ1, valueQ2, valueQ3]; // used to be: array inpans
```
第70行出现另一个语法错误。这里使用的是逗号而不是分号。同样，控制台可以帮助你自己识别这个错误：
```
count++; // used to be: count++,
```

你的下一个问题是合乎逻辑的。页面加载时运行以下代码：

var q1 = document.getElementById("Q1");
var valueQ1 = q1.options[q1.selectedIndex].value
var q2 = document.getElementById("Q2");
var valueQ2 = q2.options[q2.selectedIndex].value
var q3 = document.getElementById("Q3");
var valueQ3 = q3.options[q3.selectedIndex].value

当它在页面初始加载时运行时，valueQ1等的值都将是页面最初加载时下拉列表的初始值。当您在下拉菜单中更改选定值时，这些值不会发生更改。如果你想要这种行为，你需要一个事件监听器。但是，解决此问题的一个简单方法是在函数中设置valueQ1到valueQ3的值。这样，当您单击按钮时，您的代码将从下拉列表中获取值，该按钮应在用户手动从下拉列表选择值后：

var q1 = document.getElementById("Q1");
var q2 = document.getElementById("Q2");
var q3 = document.getElementById("Q3");
...
function myFunc() {
// get value of dropdown elements
var valueQ1 = q1.value; // you can just grab the dropdown's value, no need for `q1.options[q1.selectedIndex].value`
var valueQ2 = q2.value;
var valueQ3 = q3.value;
var inpans = [valueQ1, valueQ2, valueQ3];
while (count < ans.length) {
...

修复所有这些问题将允许您的代码根据答案进行检查。目前，由于您的count变量是在myFunc之外定义的，您的按钮将只运行while循环一次(第二次运行count >= ans.length时，使while循环条件为false，因此不会运行其中的代码(。如果您希望用户对给定的问题进行多次尝试，您可以在函数中定义count，以便在单击按钮时重置它。

附带说明一下，如果您计划在生产中使用此代码，请记住，用户将能够通过检查您网站的来源来查看问题的答案。

请参阅以下更改代码：

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Critical Device Test</h1>
<p>Please match the letter to the corresponding answer.</p>
<br>
<br>
<img src="https://i.imgur.com/kDHijRv.jpg" alt="Proton Source CD's" width=300 height=200>
<br>
<label for="Q1">A:</label>
<select id="Q1" class="Q">
<option value="0">SELECT</option>
<option value="1">L:CRDEV</option>
<option value="2">L:CDC</option>
<option value="3">L:LINCDC</option>
<option value="4">L:LINAC</option>
</select>
<br>
<label for="Q2">B:</label>
<select id="Q2" class="Q">
<option value="0">SELECT</option>
<option value="1">n1</option>
<option value="2">n2</option>
<option value="3">n3</option>
<option value="4">n4</option>
</select>
<br>
<label for="Q3">C:</label>
<select id="Q3" class="Q">
<option value="0">SELECT</option>
<option value="1">e1</option>
<option value="2">e2</option>
<option value="3">e3</option>
<option value="4">e4</option>
</select>
<br>
<br>
<button onclick="myFunc()">Click me</button>
<script>
	// Get dropdown elements when page loads
var q1 = document.getElementById("Q1");
var q2 = document.getElementById("Q2");
var q3 = document.getElementById("Q3");

var ans = [1, 2, 3]
var counter = 0;
var count = 0;
function myFunc() {
	// get value of dropdown elements
	var valueQ1 = q1.value;
var valueQ2 = q2.value;
var valueQ3 = q3.value;
var inpans = [valueQ1, valueQ2, valueQ3];
while (count < ans.length) {
if (ans[count] == inpans[count]) {
counter++;
count++;
} else {
counter = counter;
count++;
}
}
document.getElementById("one").innerHTML = "You got " + counter + " right.";
}
</script>
<p id="one"></p>
</body>
</html>

值得一提的是，以下是我如何编写等效代码。它利用了每个下拉列表上的类，然后对所有下拉列表进行迭代，以检查它们是否等于正确答案。如果你想让用户多次尝试这个问题，你可以删除{once: true}选项：

// Get dropdown elements when page loads
const dropdowns = document.querySelectorAll('.Q');
const submitBtn = document.querySelector("#guess-btn");
const resultElem = document.getElementById("one");
const ans = [1, 2, 3];
submitBtn.addEventListener("click", () => {
const correctCount = [...dropdowns].reduce(
(total, dropdown, i) => total + (+dropdown.value === ans[i]), 0
);
resultElem.innerText = `You got ${correctCount} right.`;
}, {once: true});

<h1>Critical Device Test</h1>
<p>Please match the letter to the corresponding answer.</p>
<br />
<br />
<img src="https://i.imgur.com/kDHijRv.jpg" alt="Proton Source CD's" width="300" height="200" />
<br />
<label for="Q1">A:</label>
<select id="Q1" class="Q">
<option value="0">SELECT</option>
<option value="1">L:CRDEV</option>
<option value="2">L:CDC</option>
<option value="3">L:LINCDC</option>
<option value="4">L:LINAC</option>
</select>
<br />
<label for="Q2">B:</label>
<select id="Q2" class="Q">
<option value="0">SELECT</option>
<option value="1">n1</option>
<option value="2">n2</option>
<option value="3">n3</option>
<option value="4">n4</option>
</select>
<br />
<label for="Q3">C:</label>
<select id="Q3" class="Q">
<option value="0">SELECT</option>
<option value="1">e1</option>
<option value="2">e2</option>
<option value="3">e3</option>
<option value="4">e4</option>
</select>
<br />
<br />
<button id="guess-btn">Click me</button>
<p id="one"></p>

相关内容

最新更新

热门标签：