Javascript的行为不符合预期。无法确定原因。

为了实际运用我在网络开发课程中所学的技能，我正在尝试为我搭档的小学班级创建一个关于维京人的网站

我已经获得了我想要的HTML和CSS，但是我在Javascript方面有点困难。在我看来这一切都很好，但并没有达到预期的效果

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

然后计算0-3之间的结果，并将结果发布到HTML页面中。我设计了一个框，在点击“提交”按钮之前，结果将显示为不可见。然而，当运行时，结果框只出现了一秒钟就消失了，我不知道为什么

任何帮助或建议都将不胜感激

//JAVASCRIPT//

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;
}

函数检查结果（）{
var question1=document.quick.question1.value；
var question2=document.quick.question2.value；
变量问题3=document.quick.question3.value；
var=0；
如果（问题1==“793”）{
正确的++；
}
如果（问题2==“屏蔽”）{
正确的++；
}
如果（问题3==“1066”）{
正确的++；
}
var message=[“你是一个真正的维京人！”，“不错，但你可以做得更好！”，
“奥丁不会对你的努力感到满意的！”；
var范围；
如果（正确<1）{
范围=2；
}
如果（正确>0&&correct<3）{
范围=1；
}
如果（正确>2）{
范围=0；
}
document.getElementById（“后提交”）.style.visibility=“可见”
document.getElementById（“message”）.innerHTML=message[ramge]；
document.getElementById（“correct”）.innerHTML=“您得到了”+correct+”
正确；
}
//HTML//
维京人第一次入侵英国是什么时候

1066

793

411

1999年

每个人在被允许去维京之前需要什么

屏蔽

剑

斗篷

黄金

维京人时代何时结束

793

1999年

1066

1500



//CSS//
#再灌注{
可见性：隐藏；
边框颜色：红色；
边框样式：实心；
边框宽度：5px；
}

您的页面正在刷新

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

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

//删除onclick

添加函数并将false返回到表单上的事件，因此它将取消提交

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

//添加onsubmit，注意返回false，因此它取消提交

作为与您的问题无关的小评论。在本例中，一切正常，但一般来说，可见性：隐藏和显示：无之间存在差异。通常，您会使用可见性：隐藏来保持页面中的元素（保持结构/间距不变），或者当屏幕阅读器可以发现它时。显示：在这种情况下，没有一个更适合您的使用。谢谢您的帮助！我已经删除了“onclick”，表单开始标签现在也显示：但它仍然不起作用。如果我误解了你的建议，请原谅我过于密集：）我将你的代码转移到了JSFIDLE，它似乎有一些javascript错误，这意味着这些东西不能正常工作。最后两行javascript（innerHtml）的范围拼写错误，正确的行不允许输入字符串值。我还必须调整onsubmit的发送方式，这对于您来说可能不需要，但是对于jsfiddle来说是必需的