我正在做一个数学游戏。我有这个 HTML/JavaScript 代码。它生成一个随机数,但当我输入正确答案时,它仍然显示“错误”。我不确定出了什么问题。
这是 HTML 代码:
<table width="400" border="1" align="center">
<tr>
<td><div id="number1">1</div></td>
<td><div>+</div></td>
<td><div id="number2">2</div></td>
<td><div>=</div></td>
<td><input type="text"></input></td>
<td><input type="button" value="Check"></input></td>
</tr>
</table>
这是我的 JavaScript 代码:
//random number appear when start game
var number1;
var number2;
number1 = Math.floor((Math.random() * 10) + 1);
number2 = Math.floor((Math.random() * 10) + 1);
document.getElementById("number1").innerHTML=number1;
document.getElementById("number2").innerHTML=number2;
//Answer
var answer = number1 + number2;
//add click handler with check answer
var checkAnswer = document.querySelector('input[type=text]');
var value = checkAnswer.value;
var btn = document.querySelector('input[type=button][value=Check]');
btn.onclick = function()
{
if (value == answer)
{
alert('You are correct');
}
else{
alert('You are incorrect, the answer was ' + answer);
}
document.querySelector('input[type=text]').value = "";
document.getElementById('number1').innerHTML = "";
document.getElementById('number2').innerHTML = "";
number1 = Math.floor((Math.random() * 10) + 1);
number2 = Math.floor((Math.random() * 10) + 1);
document.getElementById('number1').innerHTML = number1;
document.getElementById('number2').innerHTML = number2;
answer = number1 + number2
};
最佳答案
在 .onclick
方法中移动以下行。
var checkAnswer = document.querySelector('input[type=text]'); //needn't be moved in method
var value = checkAnswer.value;
您可以通过 JSFiddle 验证结果.
问题是变量value
在加载页面时用空字符串初始化,因为加载页面时该值是空的。
关于javascript - 尝试创建基本的数学游戏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28695154/