JavaScript HTML中的简单数学游戏，从if / else获取错误

Question

我不明白为什么来自if / else条件的“警报”总是会给我一个错误 - 而它的反面却没有！

我试图将其更改为“切换”，获取内部和外部变量的变量，但这些都没有帮助。

const randomNumb = {
  x: Math.round((Math.random()) * 10 + 1),
  y: Math.round((Math.random()) * 10 + 1)
};

const action1 = document.querySelector("#theAction");
const firstNum = document.querySelectorAll("#numbers")[0];
const secondNum = document.querySelectorAll("#numbers")[1];
firstNum.innerHTML = randomNumb.x;
secondNum.innerHTML = randomNumb.y;

if (firstNum > secondNum) {
  action1.innerHTML = "-";
} else {
  action1.innerHTML = "+";
}

const answer1 = randomNumb.x - randomNumb.y;
const answer2 = randomNumb.x + randomNumb.y;

const checkButton = document.querySelector("input[type=button][value=Check]");
const checkAnswer = document.querySelector("input[type=text]");
const theValue = checkAnswer.value;


checkButton.onclick = function() {

  if (theValue === answer1 || theValue === answer2){
    alert("Correct!")
  } else {
    alert("Error")
  }

  location.reload();
};

我正在尝试这样做，当我在“checkAnswer”中输入正确的答案时，它会正确。如果没有，错误。但它一直给我“错误”。有什么建议 ？ （也许我可以更好地编写代码？）

Answer 1

要验证自己check this link并检查您要在if / else语句中尝试比较的对象类型。

const action1 = document.querySelector("#theAction");
const firstNum = document.querySelectorAll("#numbers")[0]; // this is a HTML element
const secondNum = document.querySelectorAll("#numbers")[1];
firstNum.innerHTML = randomNumb.x;
secondNum.innerHTML = randomNumb.y;

if (firstNum > secondNum) { // comparision is not possible
  action1.innerHTML = "-";
 } else {
 action1.innerHTML = "+";
}

让我们访问HTML元素中的值并将其转换为Number（）

if (Number(firstNum.innerHTML) > Number(secondNum)) { // comparision is possible
  action1.innerHTML = "-";
 } else {
 action1.innerHTML = "+";
}

这将解决你目前遇到的问题，干杯！

Answer 2

我解决了！

checkButton.onclick = function() {
const theValue = checkAnswer.value;
  if (theValue === answer1){
    alert("correct")
  } else if (theValue == answer2){
    alert("correct")
  } else {
    alert("error")
  };

};