HTML，JS Tables 将无法正确更新

Question

我是学习这些语言的新手，一切看起来在语法上都是正确的。我遇到的问题是正确的按钮只会保持点击正确，而不是答案正确与否。表格正在更新，但我不确定问题出在哪里。 if-else 语句看起来没问题（我知道我不需要 else if ）。如果有人能帮我找出问题所在，我将不胜感激。

window.onload = function() {
  equations();
};

window.onload = equations;
var sum;
var correct = 0,
  incorrect = 0;

function equations() {
  var a, b, sum;
  //assign random values to a,b
  a = Math.floor(Math.random() * 10) + 1;
  b = Math.floor(Math.random() * 10) + 1;
  //array that holds values, MUST BE MUTUABLE
  solve = [a + b, a - b, a / b, a * b];
  signs = ['+', '-', '÷', 'x'];
  //assign random opperation
  let randoArr = Math.floor(Math.random() * solve.length)
  sum = solve[randoArr];
  showSign = signs[randoArr];
  //show in html
  document.getElementById('showMath').innerHTML = a + showSign + b;
  //This will be used to reassign the value to global variable
  window.sum = sum;
  console.log(sum);
  return (sum)
};

// Function checks if user Input is correct and then adds tallies to the table.
// The tables values are held in correct and incorrect and incremented based on the conditional statement.
function confirmIfRight() {
  var userInput = document.getElementById('userInput').value;
  const correctEl = document.getElementById('correctCount');
  const incorrectEl = document.getElementById('incorrectCount');
  sum = equations();
  if (userInput = sum) {
    correct++;
    correctEl.textContent = correct;
    equations();
  } else if (userInput = '') {
    incorrect++;
    incorrect.textContent = incorrect;
    equations();
  } else {
    incorrect++;
    incorrectEl.textContent = incorrect;
    equations();
  }
  clearTextBox();
}

//This function is used to clear the textbox
function clearTextBox() {
  document.getElementById('userInput').value = "";
}

<body>
  <!--Equations load when web page is loaded up. -->
  <script>
    window.onload = function() {
      equations();
    };
  </script>
  <h1> Welcome to Fast Math! </h1>
  <p> A website for solving simple math problems. </p>
  <!-- Math Stuff-->
  <div id="showMath">

  </div>
  <!-- ANSWERS GO HERE -->
  <form>
    <input type="input" id="userInput" />
    <input type="button" id="submit" value="Enter" onclick="confirmIfRight()" onclick="document.getElementById('userInput').value = '' " />
  </form>

  <!-- Score tally-->
  <table>
    <tr>
      <td><b>Correct</b></td>
      <td><b>Incorrect</b></td>
    </tr>
    <tr>
      <td id="correctCount"> 0 </td>
      <td id="incorrectCount"> 0 </td>
    </tr>
  </table>

</body>

Answer 1

您犯了一些错误。主要问题是每次调用 equations 函数时都会生成一个新的 equation 和 sum value。所以我将该值保存在一个新的隐藏输入中，该输入在视觉上对用户是隐藏的。然后将其与用户输入值进行比较。有些方法前面有个加号，就是把值转成数字。此外，我允许自己进行一些代码命名更改，以便代码感觉更好。此外，您可以删除等式方法中的 return 语句，因为它没有理由再存在了。

let correct = 0,
  incorrect = 0;

function generateEquation() {
  var a, b, sum;
  //assign random values to a,b
  a = Math.floor(Math.random() * 10) + 1;
  b = Math.floor(Math.random() * 10) + 1;

  //array that holds values, MUST BE MUTUABLE
  solve = [a + b, a - b, a / b, a * b];
  signs = ["+", "-", "÷", "x"];

  //assign random opperation
  let randoArr = Math.floor(Math.random() * solve.length);

  sum = solve[randoArr];
  showSign = signs[randoArr];

  //show in html
  document.getElementById("showMath").innerHTML = a + showSign + b;
  //This will be used to reassign the value to global variable
  window.sum = sum;
  document.getElementById("hiddenInput").value = sum;
  return sum;
}

// The tables values are held in correct and incorrect and incremented based on the conditional statement.
function isCorrect() {
  let userInput = +document.getElementById("userInput").value;
  const correctEl = document.getElementById("correctCount");
  const incorrectEl = document.getElementById("incorrectCount");

  if (userInput === +document.getElementById("hiddenInput").value) {
    correct++;
    correctEl.textContent = correct;
    generateEquation();
  } else if (userInput == "") {
    incorrect++;
    incorrect.textContent = incorrect;
    generateEquation();
  } else {
    incorrect++;
    incorrectEl.textContent = incorrect;
    generateEquation();
  }
  clearTextBox();
}

//This function is used to clear the textbox
function clearTextBox() {
  document.getElementById("userInput").value = "";
}

generateEquation();

<!DOCTYPE html>
<html lang="eng">
  <head>
    <link rel="stylesheet" href="fastmath_style.css" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial scale = 1" ; />
    <title>Fast Math</title>
  </head>
  <body>
    <h1>Welcome to Fast Math!</h1>
    <p>A website for solving simple math problems.</p>
    <!-- Math Stuff-->
    <div id="showMath"></div>
    <!-- ANSWERS GO HERE -->
    <form>
      <input type="input" id="userInput" />
      <input type="hidden" id="hiddenInput" />
      <input
        type="button"
        id="submit"
        value="Enter"
        onclick="isCorrect()"
        onclick="document.getElementById('userInput').value = '' "
      />
    </form>

    <!-- Score tally-->
    <table>
      <tr>
        <td><b>Correct</b></td>
        <td><b>Incorrect</b></td>
      </tr>
      <tr>
        <td id="correctCount">0</td>
        <td id="incorrectCount">0</td>
      </tr>
    </table>

    <script src="./app.js"></script>
  </body>
</html>

Answer 2

您的代码无法正常工作的主要原因是您没有在 if..else 语句中使用 equality operator (==), you are using the assignment operator (=)。单独解决这个问题应该可以解决您问题中的主要问题。

if (userInput == sum) {
    correct++;
    correctEl.textContent = correct;
    equations();
} else if (userInput == '') {
    incorrect++;
    incorrect.textContent = incorrect;
    equations();
} else {
    incorrect++;
    incorrectEl.textContent = incorrect;
    equations();
}

但是，这会立即在您的代码中出现另一个问题：您在 confirmIfRight() 中重新分配后立即比较总和。在比较之前将生成一个新的方程式。这意味着考虑到给出的原始方程式和给出的答案，总和的值很可能不正确。

要解决此问题，请删除 if..else 语句之前的 sum = equations(); 行：

//sum = equations();
if (userInput == sum) {
    correct++;
    correctEl.textContent = correct;
    equations();
} else if (userInput == '') {
    incorrect++;
    incorrect.textContent = incorrect;
    equations();
} else {
    incorrect++;
    incorrectEl.textContent = incorrect;
    equations();
}

此外，我同意您可以删除 else if 部分，这应该涵盖所有答案不等于预期结果的情况。

if (userInput == sum) {
  correct++;
  correctEl.textContent = correct;
  equations();
} else {
  incorrect++;
  incorrectEl.textContent = incorrect;
  equations();
}

几次测试表明，这就是让代码正常工作所需的全部内容。运行以下代码片段为例：

window.onload = equations;
var sum;
var correct=0, incorrect=0;


function equations(){
    var a,b,sum;
    //assign random values to a,b
    a = Math.floor(Math.random() * 10) + 1;
    b = Math.floor(Math.random() * 10) + 1;
    //array that holds values, MUST BE MUTUABLE
    solve = [a+b , a-b ,a /b ,a *b ];
    signs = ['+', '-','÷','x'];
    //assign random opperation
    let randoArr = Math.floor(Math.random()*solve.length)
    sum=solve[randoArr];
    showSign=signs[randoArr];
    //show in html
    document.getElementById('showMath').innerHTML = a + showSign + b;
    //This will be used to reassign the value to global variable
                 window.sum = sum;
                 console.log(sum);
    return(sum)
};
// Function checks if user Input is correct and then adds tallies to the table.
// The tables values are held in correct and incorrect and incremented based on the conditional statement.
function confirmIfRight(){
    var userInput = document.getElementById('userInput').value;
    const correctEl = document.getElementById('correctCount');
    const incorrectEl= document.getElementById('incorrectCount');
    //sum = equations();
    if (userInput == sum) {
        correct++;
        correctEl.textContent = correct;
        equations();
    } else {
        incorrect++;
        incorrectEl.textContent = incorrect;
        equations();
    }
    clearTextBox();
}
//This function is used to clear the textbox
function clearTextBox() {
    document.getElementById('userInput').value = "";
}

<!--Equations load when web page is loaded up. -->
<script>
    window.onload = function(){
        equations();
    };
</script>
<h1> Welcome to Fast Math! </h1>
<p> A website for solving simple math problems. </p>
<!-- Math Stuff-->
<div id="showMath">

</div>
<!-- ANSWERS GO HERE -->
<form>
    <input type="input" id="userInput"/>
    <input type="button" id ="submit" value="Enter"onclick="confirmIfRight()" onclick=
    "document.getElementById('userInput').value = '' "/> 
</form>

<!-- Score tally-->
<table>
    <tr>
        <td><b>Correct</b></td>
        <td><b>Incorrect</b></td>
    </tr>
    <tr>
        <td id="correctCount"> 0 </td>
        <td id="incorrectCount"> 0 </td>
    </tr>
</table>

HTML，JS Tables 将无法正确更新

HTML, JS Tables will not update properly

html

javascript

conditional-statements