Why is the JavaScript function checking value before submit-CodePudding

I have been working on a website that randomly generates math equations, I have the javascript algorithm and the HTML but the problem is the function runs before the value is submitted. This is the code:

const duration = 60000
const end = Date.now()   duration

let correct = 0
let error = 0
let result = -1

function ask() {
  const op1 = Math.floor(Math.random() * 100)
  const op2 = Math.floor(Math.random() * 100)
  result = op1   op2

  document.getElementById('eq').innerHTML = (`${op1}   ${op2} = ?`);
}

function handler(evt) {
  document.getElementById("btn01").submit();
  if ("btn01" == result) {
    correct  
    document.getElementById('f').innerHTML = ("correct!")

    if (Date.now() < end) ask()
  } else {
    error  
    document.getElementById('f').innerHTML = ("wrong :(")
  }
}

document.addEventListener("keyup", handler)

ask()

setTimeout(() => {
  document.getElementById('q').innerHTML = (`${correct} correct and ${error} error`)
  document.removeEventListener("keyup", handler)
}, duration)

<body>

  <p>Enter names in the fields, then click "Submit" to submit the form:</p>
  <h1><span id="eq"></span></h1>
  <form id="btn01">
    <input type="number">
    <input type="button" id="z" value="Submit" onclick="handler(evt)">
  </form>
  <h1><span id="f"></span></h1>
  <h1><span id="q"></span></h1>


</body>

I have tried using onclick in both HTML and javascript but I either did them wrong or they did not work. Note that this is not a repost of other questions asked for different circumstances. Thanks

CodePudding user response：

There are a couple of issues in your code. I have made a couple of changes and show below. The first is that you need to read the value from the input field. Not sure what you were trying to do reading the button. The second is the keyup event handler was annoying because it checked after every key press.

<!DOCTYPE html>
<html>
<body>

<p>Enter names in the fields, then click "Submit" to submit the form:</p>
<h1><span id="eq"></span></h1>
<form id="btn01">
    <input type="number" id="answer">
    <input type="button" id = "z" value="Submit" onclick="handler(event)">
</form>
<h1><span id="f"></span></h1>
<h1><span id="q"></span></h1>
<script>
const duration = 60000
const end = Date.now() duration

let correct = 0
let error = 0
let result=-1

function ask() {
  const op1 = Math.floor(Math.random()*100)
  const op2 = Math.floor(Math.random()*100)
  result = op1   op2
  
  document.getElementById('eq').innerHTML = (`${op1}   ${op2} = ?`);
}
function handler(evt) {
    //document.getElementById("btn01").submit();
    if (document.getElementById("answer").value == result) {
    correct  
    document.getElementById('f').innerHTML =("correct!")
    
    if (Date.now()<end) ask()
    }
  
    else {
    error  
    document.getElementById('f').innerHTML =("wrong :(")
  }
}

//document.addEventListener("keyup", handler)

ask()

setTimeout(()=>{
    document.getElementById('q').innerHTML =(`${correct} correct and ${error} error`)
  document.removeEventListener("keyup", handler)
}, duration)
    </script>


</body>
</html>

CodePudding user response：

several issues.

you should have added a click event listener to submit button, not 'keyup', because it listens to every button pushed and submits the form even though the user might have not submitted willingly.y
The main error is caused by -> document.getElementById("btn01").submit(); in the handle function. when you add click event, button click will automatically submit form.
You can handle event listeners in this manner document.getElemetById('buttonIdExample').addEventListener("click", handler). and remove the listener this way.
You can also define variable -> const Button = document.getElemetById('buttonIdExample') and then -> Button.addEventListener("click", handler).
finally, for the best practice, define more easy-to-understand variable names.