HTML, JS Tables will not update properly

Issue

I am new to learning these languages, and everything looks syntactically correct. The issue I’m having is that the correct button will just keep click as correct rather or not the answer is correct or not. The tables are updating, but I’m not sure where the issue is. The if-else statement looks to be okay (I know I don’t need the else if in there). If anyone could help me figure out what is wrong I would appreciate it.

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>

Solution

The main reason your code wasn’t working is because you aren’t using the equality operator (==), you are using the assignment operator (=) in your if..else statements. Fixing that alone should resolve the main problem in your question.

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

However, this presents another problem in your code immediately: you’re comparing sum immediately after reassigning it in confirmIfRight(). A new equation will have been generated prior to the comparison. This means the value in sum will most likely not be correct considering the original equation presented and the answer given.

To resolve this, remove the sum = equations(); line just before the if..else statements:

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

Additionally, I do agree that you can remove the else if section and this should capture all cases where the answer does not equal the expected result.

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

Testing a few times showed that this is all you need to have your code working. Run the code snippet below as an example:

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>

Answered By – phentnil

Answer Checked By – Willingham (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.