Estoy creando un formulario para mi sitio web html y cuando presiono el botón Enviar, la función no se ejecuta después de soltar el botón, no estoy usando onClick, estoy usando onSubmit. Quiero que se ejecute continuamente después de presionar el botón y también cuando lo suelto, muestra que la variable de mis preguntas y la variable de respuesta están en blanco. ¿Cómo puedo solucionar esto?
<!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>