I am making a form for my html website and when I press the submit button the function is not running after I release the button , I am not using onClick I am using onSubmit. I want it to run continously after the button is pressed also when I release the button it's showing that my questions variable and answer varibale is blank. How do I fix this?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aspire Education</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
</head>
<body>
<div class="titleBar">
<span class="title">Aspire Education</span>
</div>
<form onsubmit="onPressReturn()">
<label class="question_text" for="question">Question</label>
<input class="question_input" type="text" id="question" placeholder="Enter question">
<label class="answer_text" for="answer">answer</label>
<input class="answer_input" type="text" id="answer" placeholder="Enter answer">
<button type="submit">Add question</button>
</form>
<script>
var clicked = false
function work() {
clicked = true
let question = document.getElementById('question').value
let answer = document.getElementById('answer').value
console.log(clicked);
console.log(answer);
return [clicked, question, answer]
}
function onPressReturn() {
[clicked, question, answer] = work()
}
if (clicked == true) {
console.log('question = ' + question)
console.log('answer = ' + answer)
}
</script>
</body>
</html>