Why when I am submiting an answer javascript is always displaying false?-CodePudding

I have problem with displaying true/false after submiting an answer to question.

I need to display true when answer is true e.g.( 14 1=15 true), but my code is always displaying false and never displays true. Hope you will understand my code.

p.s. to display question press answer, in start it doesn't display question.

function myfunc() {
    //randomizer   - * /
    var symbol;

    var s = Math.floor(Math.random() * 5);
    if (s === 1) {
        symbol = ' ';
    }
    if (s === 2) {
        symbol = '-';
    }
    if (s === 3) {
        symbol = '*';
    }
    if (s === 4) {
        symbol = '/';
    }
    //first num randomizer
    var firstnum = Math.floor(Math.random() * 100);
    //sec num randomizer
    var secnum = Math.floor(Math.random() * 100);
    document.getElementById('demo').innerHTML = firstnum   symbol   secnum;
    //answer filter
    var input = document.getElementById('input').value;
    var testanswer;
    if (s === 1) {
        testanswer = firstnum   secnum;
    }
    if (s === 2) {
        testanswer = firstnum - secnum;
    }
    if (s === 3) {
        testanswer = firstnum * secnum;
    }
    if (s === 4) {
        testanswer = firstnum / secnum;
    }
    //test answerer
    if (testanswer === input) {
        document.getElementById('atbilde').innerHTML = 'true';
    }
    else {
        document.getElementById('atbilde').innerHTML = 'false';
    }
}

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <script type="application/javascript" src="test.js"></script>
    </head>
    <body>
    <p id="demo"></p>
        <input id="input" type="text">
        <button id="mybt" type="button" onclick="myfunc()">submit</button><br>
        <p id="atbilde"></p>
    </body>
</html>

CodePudding user response：

First of all, randomizing * 5 for 4 symbols is incorrect. Also, try to compare the answer to the actual numbers, not to the newly generated one.

var last = null;
myfunc();

function myfunc() {
  //randomizer   - * /
  var symbol;

  var s = Math.floor(Math.random() * 4)   1;
  if (s === 1) {
    symbol = ' ';
  }
  if (s === 2) {
    symbol = '-';
  }
  if (s === 3) {
    symbol = '*';
  }
  if (s === 4) {
    symbol = '/';
  }
  //first num randomizer
  var firstnum = Math.floor(Math.random() * 10);
  //sec num randomizer
  var secnum = Math.floor(Math.random() * 10);
  document.getElementById('demo').innerHTML = firstnum   symbol   secnum;
  //answer filter
  var input = document.getElementById('input').value;

  var testanswer;
  if (s === 1) {
    testanswer = firstnum   secnum;
  }
  if (s === 2) {
    testanswer = firstnum - secnum;
  }
  if (s === 3) {
    testanswer = firstnum * secnum;
  }
  if (s === 4) {
    testanswer = firstnum / secnum;
  }

  if (last != null) {
    if (last == input && input != '') {
      document.getElementById('atbilde').innerHTML = 'true';
    } else {
      document.getElementById('atbilde').innerHTML = 'false';
    }
  }
  last = testanswer;
}

<form onsubmit="myfunc(); return false">
  <p id="demo"></p>
  <input id="input" type="text">
  <button id="mybt" type="submit">submit</button><br>
  <p id="atbilde"></p>
</form>

CodePudding user response：

Need to separate generating questions from checking answers. I modified your code and added some comments:

HTML

<p id="demo"></p>
<input id="input" type="text">
<button id="mybt" type="button" onclick="checkAnswer()">submit</button><br>
<button type="button" onclick="showQuestion()">Show New Question</button><br>
<p id="atbilde"></p>

JavaScript:

  var s, firstnum, secnum;

  // first, show an initial question for a start
  showQuestion();

  // this method is used to show initial question and also to "Show New Question" when that button is pressed
  function showQuestion(){
      //randomizer   - * /
      let symbol;

      // changed formula to return 1, 2, 3, or 4. It was also returning 0 and 5 previously.
      s = Math.floor(Math.random() * 4)   1;
      if (s === 1) {
          symbol = ' ';
      }
      if (s === 2) {
          symbol = '-';
      }
      if (s === 3) {
          symbol = '*';
      }
      if (s === 4) {
          symbol = '/';
      }

      //first num randomizer
      firstnum = Math.floor(Math.random() * 100);
      //sec num randomizer
      secnum = Math.floor(Math.random() * 100);
      document.getElementById('demo').innerHTML = firstnum   symbol   secnum;
  }

  // when the user is ready and clicks submit, we check the answer using s, firstnum, and secnum
  function checkAnswer() {
      //answer filter
      var input = document.getElementById('input').value;
      var testanswer;
      if (s === 1) {
          testanswer = firstnum   secnum;
      }
      if (s === 2) {
          testanswer = firstnum - secnum;
      }
      if (s === 3) {
          testanswer = firstnum * secnum;
      }
      if (s === 4) {
          testanswer = firstnum / secnum;
      }

      console.log('the answer is supposed to be ', testanswer, ' and the user submitted ', testanswer);

      //test answer
      // I changed === to == this way you can compare a string "100" to the number 100 and it will be true.
      // Because "100" === 100 is false (it checks the type) and "100" == 100 is true (does not check the type.)
      if (testanswer == input) {
          document.getElementById('atbilde').innerHTML = 'true';
      }
      else {
          document.getElementById('atbilde').innerHTML = 'false';
      }
  }