Problem with solving equations in JavaScript

Question

This code is supposed to give you an equation and when you solve it, you get another one in three seconds. You can choose the amount of equations you're getting and how "high" the math is. And it will give you an alert when you did your chosen amount of questions. This code returns no error but it never gives me the alert as it is supposed to. How do I fix this? (I know I am a beginner so my code is a bit messy)

var rand1, rand2, text1, text2
let count = 0;

var correct = 0;

function button() {
  text1 = document.getElementById("number").value;
  text2 = document.getElementById('questions').value;
  rand1 = Math.floor(Math.random() * text1);
  rand2 = Math.floor(Math.random() * text1);
  var html = "<br><br><input type='number' id='id'> <button onclick=' check() '> check </button> " +
    Number(rand2) + '+' + Number(rand1);
  document.getElementById('div').innerHTML = html;

}

function check() {
  text2 = document.getElementById('questions').value;
  var answer = rand1 + rand2;
  var text11 = document.getElementById('id').value;

  if (answer == text11) {
    var h = "<input type='number' id='id'> " +
      " <button onclick=' check() '> check </button> " +
      correct + '/' + text2 + '<br>' + count;
    document.getElementById('div').innerHTML = h;
    setTimeout(wait, 3000);
    document.getElementById("but").disabled = true;
    correct = correct + 1;
    count = count + 1;
  } else {
    count = count + 1;
    var b = "<input type='number' id='id'> " +
      " <button onclick=' check() '> check </button> "
      + correct + '/' + text2 + '<br>' + count;
    document.getElementById('div').innerHTML = b;
    setTimeout(wait, 3000);
    document.getElementById("but").disabled = true;
  }
  if (count === text2) {
    alert(correct + '/' + text2);
  }

  function wait() {
    button()
  }
}

<p>maximum number:<input type="text" id="number"></p>
<p>how many questions?<input type="text" id="questions"></p>
<button onclick="button()" id='but'> ok </button>
<div id='div'> </div>

`count` is an integer while `text2` is a string. Using the `===` comparison will not cast them to the same type. Use `==` in this case, or parse the string into an integer first. — h0r53, May 17 '21 at 16:41

score 0 · Answer 1 · answered May 17 '21 at 16:52

count is an integer and text2 is a string so the if statement comparing count and text2 will never return true. Therefore that block delivering the alert will never fire.

I would simply use javascript's parstInt function to make sure text2 is an integer

text2 = parseInt(document.getElementById('questions').value);

Prosy Arceno · Accepted Answer · 2021-05-17T18:32:34.463

Aside from using strict equality, you're also displaying the correct var before updating the value when it's correct. This should work how you want it:

var rand1, rand2, text1, text2
let count = 0;
let correct = 0;


function button() {
  text1 = document.getElementById("number").value;
  text2 = document.getElementById('questions').value;
  rand1 = Math.floor(Math.random() * text1);
  rand2 = Math.floor(Math.random() * text1);
  var html = "<br><br><input type='number' id='id'> <button onclick=' check() '> check </button> " + Number(rand2) + '+' + Number(rand1);
  document.getElementById('div').innerHTML = html;

}

function check() {
  text2 = document.getElementById('questions').value;
  var answer = rand1 + rand2;
  var text11 = document.getElementById('id').value;

  if (answer == text11) {
    count = count + 1;
    correct = correct + 1;
    var h = "<input type='number' id='id'> " + " <button onclick=' check() '> check </button> " + correct + '/' + text2 + '<br>' + count;
    document.getElementById('div').innerHTML = h;
    setTimeout(wait, 3000);
    document.getElementById("but").disabled = true;
  } else {
    count = count + 1;
    var b = "<input type='number' id='id'> " + " <button onclick=' check() '> check </button> " + correct + '/' + text2 + '<br>' + count;
    document.getElementById('div').innerHTML = b;
    setTimeout(wait, 3000);
    document.getElementById("but").disabled = true;
  }
  if (count == text2) {
    alert(correct + '/' + text2);
  }

  function wait() {
    button()
  }
}

<html>

<body>
  <p>maximum number:<input type="text" id="number"></p>
  <p>how many questions?<input type="text" id="questions"></p>
  <button onclick="button()" id='but'> ok </button>
  <div id='div'> </div>

Problem with solving equations in JavaScript

2 Answers2