Issue
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
Solution
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>Answered By - Mifo
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.