使用Javascript创建测验页面

Creating a quiz page using Javascript

本文关键字：Javascript 创建 使用      更新时间：2023-09-26

我试图使用Javascript创建一个简单的测试页面。否则一切都很顺利，但当我在浏览器中运行这段代码后，按下提交按钮，出现在段落中的DOM文本（通过脚本）在一瞬间消失了。我原以为文本会一直显示在屏幕上，直到下一次操作。请帮我解决这个问题。

谢谢

代码

<!DOCTYPE HTML>
<html>
<head>
<title>
Quiz
</title>
  <script type = "text/Javascript">
 function checkAnswers()
         {
            var myQuiz = document.getElementById( "myQuiz" );
            if ( myQuiz.elements[ 2 ].checked )
 document.getElementById("demo").innerHTML = "Congrats, Thats the Right answer";
                else 
            document.getElementById("demo").innerHTML = "Woops!! The Correct answer is 'Mouse'.<br>Click 'Next' to Proceed";
         } 
</script>
</head>
<body>
<br><br><br><br><br><br>
<form id = "myQuiz" onsubmit = "checkAnswers()" action = "">
Which among the following is readily found in computers ?
<br><br><br>
<input type = "radio" name = "radiobutton" value = "A" /><label> Zebra</label>
<input type = "radio" name = "radiobutton" value = "B" /><label> Girrafe</label>
<br><br> <input type = "radio" name = "radiobutton" value = "C" /><label>Mouse</label>
<input type = "radio" name = "radiobutton" value = "D" /><label>Mosquito</label>
</div><br><input type = "submit" name = "submit" value = "Submit" />
<br>
<p id = "demo" "> </p>
</form>
</body>
</html>

进行以下更改：

HTML

<form id = "myQuiz" onsubmit = "checkAnswers(event)" action = "">

JS-

function checkAnswers(event) {
  event.preventDefault();
  ...
}

preventDefault取消表单提交事件，该事件将导致页面重新加载，并且您的文本将消失。

演示

只需在onSubmit参数内返回"false"，如下所示：

<form id = "myQuiz" onsubmit = "return false" action = "">

并在有人点击按钮时调用checkAnswers()功能；

<input type = "submit" name = "submit" value = "Submit" onclick="checkAnswers()" />
相关文章：