Сравнение всегда ложно при добавлении двух случайных чисел и сравнении суммы с пользовательским вводом

Я пытаюсь рандомизировать и присваивать переменным два числа и добавлять их при отображении переменных пользователю. Пользователь вводит сумму двух переменных и, если ввод и сумма совпадают, пользователь выигрывает. Хотя, когда я сравниваю, результат всегда ложный, когда я использовал console.log, чтобы увидеть логическое значение. Я использую HTML и JavaScript. Вот мой код:

<html>
<head>
<title>
Game A
</title>
<script>
var y = parseInt(Math.floor(Math.random()*20));
var z = parseInt(Math.floor(Math.random()*20));
function myFunction() {
var p = parseInt(document.getElementById("demo"));
var z = parseInt(p);
var x = parseInt(y) + parseInt(z);
var q = parseInt(x);
console.log(z===q?true:false);
if(z===q){
alert("Good job!");
}
else{
alert("aw, try again!");
}
}
</script>
</head>
<body>
<p>Click the button to calculate x.</p>
<br/>
<div id="a" style="display:inline-block;heigh:100px;width:100px;">
<script>
document.getElementById('a').innerHTML= y;
</script>
</div>
<div id="b" style="display:inline-block;heigh:100px;width:100px;">
<script>
document.getElementById('b').innerHTML= z;
</script>
</div>
<input id="demo"></input>
<button onclick="myFunction()">Try it</button>

</body>
</html>

1 ответ

Решение

Вам необходимо использовать: document.getElementById("demo").value чтобы получить значение из поля ввода. Не меняйте значение z внутри функции путем переназначения ей нового значения. Попробуйте это:

<html>
<head>
<title>
Game A
</title>
<script>
var y = parseInt(Math.floor(Math.random()*20));
var z = parseInt(Math.floor(Math.random()*20));
function myFunction() {
var p = parseInt(document.getElementById("demo").value);
var z1 = parseInt(p);
var x = parseInt(y) + parseInt(z);
var q = parseInt(x);
  console.log(q); console.log(z1);
console.log(z===q?true:false);
if(z1===q){
alert("Good job!");
}
else{
alert("aw, try again!");
}
}
</script>
</head>
<body>
<p>Click the button to calculate x.</p>
<br/>
<div id="a" style="display:inline-block;heigh:100px;width:100px;">
<script>
document.getElementById('a').innerHTML= y;
</script>
</div>
<div id="b" style="display:inline-block;heigh:100px;width:100px;">
<script>
document.getElementById('b').innerHTML= z;
</script>
</div>
<input id="demo"></input>
<button onclick="myFunction()">Try it</button>

</body>
</html>

Другие вопросы по тегам