Javascript 未按预期运行。无法确定原因。

Question

为了实际运用我在网络开发类(class)中学到的技能，我正在尝试为我合作伙伴的小学类(class)创建一个关于维京人的网站。

我已经设法获得了我想要的 HTML 和 CSS，但我在 Javascript 方面遇到了一些困难。在我看来一切都很好，但没有按预期运行。

我有一个测验和一个提交按钮。单击此按钮时，将引用我的 .js 文件中的“checkresults”函数。

这应该会计算出介于 0 - 3 之间的结果，并将此结果发布到 HTML 页面中。我设计了结果将显示在其中的框，在单击“提交”按钮之前是不可见的。但是，运行时结果框只出现一秒钟就消失了，我不明白为什么。

如有任何帮助或建议，我们将不胜感激!

//Java脚本//

function checkresults() {
var question1 = document.quiz.question1.value;
var question2 = document.quiz.question2.value;
var question3 = document.quiz.question3.value;
var correct = 0;
if (question1 == "793") {
correct++;
}
if (question2 == "Shield") {
correct++;
}
if (question3 == "1066") {
correct++;
}

var message = ["You're a real Viking!", "Not bad but you can do better!", 
"Odin would not be pleased with your effort!"];
var range;

if (correct < 1) {
range = 2;
}
if (correct > 0 && correct < 3) {
range = 1;
}
if (correct > 2) {
range = 0;
}

document.getElementById("afterSubmit").style.visibility = "visible"

document.getElementById("message").innerHTML = message[ramge];
document.getElementById("correct").innerHTML = "You got " + correct + " 
correct!";
}

//HTML//
<form id="quiz" name="quiz">
<p>When did the Vikings first invade Britain?</p>
<input type="radio" id="mc" name="question1" value="1066" />1066<br />
<input type="radio" id="mc" name="question1" value="793" />793<br />
<input type="radio" id="mc" name="question1" value="411" />411<br />
<input type="radio" id="mc" name="question1" value="1999" />1999<br />

<p>what did every man need before he was allowed to go Viking?</p>
<input type="radio" id="mc" name="question2" value="Shield" />Shield<br />
<input type="radio" id="mc"name="question2" value="Sword" />Sword<br />
<input type="radio" id="mc"name="question2" value="Cloak" />Cloak<br />
<input type="radio" id="mc" name-"question2" value="Gold" />Gold<br />

<p>when did the Viking age end?</p>
<input type="radio" id="mc" name="question3" value="793" />793<br />
<input type="radio" id="mc" name="question3" value="1999" />1999<br />
<input type="radio" id="mc" name="question3" value="1066" />1066<br />
<input type="radio" id="mc" name="question3" value="1500" />1500<br />

<input type="submit" id="button" value="Lets see how you did!" onclick = 
"checkresults();">
</form>

<div id="afterSubmit">
<p id="message"></p>
<p id="correct"></p>

//CSS//
#afterSubmit {
visibility: hidden;
border-color: red;
border-style: solid;
border-width: 5px;
}

Answer 1

您的页面正在刷新。

改变这一点的最好方法是将函数移动到表单 onsubmit 事件中。

//Remove the onclick
<input type="submit" id="button" value="Lets see how you did!" onclick="checkresults();">

添加函数并返回false给表单上的事件，从而取消提交

//Add the onsubmit, notice the return false, so it cancels submission
<form id="quiz" name="quiz" onsubmit="checkresults();return false;">