我对编码非常陌生，而且我现在非常沮丧，我不知道为了让这个工作起来我不知道我在想什么。请帮忙！现在，当我点击按钮提交它时，只需将我带回页面顶部并重置答案。它不会告诉我结果。
<html>
<head>
<title>Destiny enemy race quiz</title>
</head>
<style>
body {
background-color: #e6ffff;
}
h1 {
font-family: "Arial Black", Gadget, sans-serif;
color: #000033;
text-align: center;
}
p {
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 20px;
color: #000033;
text-align: left;
}
</style>
<body>
<h1>Which Destiny enemy race are you?</h1>
<form>
<p>If you were dresing up for Halloween, what would you dress up as?</p>
<input type="radio" name="q1" value="fallen" checked="checked"> Captain Jack Sparrow
<br><input type="radio" name="q1" value="hive"> A zombie from The Walking Dead
<br><input type="radio" name="q1" value="vex"> The Terminator
<br><input type="radio" name="q1" value="cabal"> A military soldier
<br><br>
这总共有10个问题。
<input type="submit" value="Get results!" onclick="checkQuiz()"> <input type="reset" value="Reset">
</form>
<p id="raceParagraph"></p>
</body>
<script>
function checkQuiz() {
var question = 1;
var fallen = 0;
var hive = 0;
var vex = 0;
var cabal = 0;
var answer = 1;
var youranswer = 0;
var result = '';
var choice;
for (question = 1; question <= 10; question++) {
var selectedq = document.forms['quiz'].elements['q'+question];
for (var i = 0; i < selectedq.length; i++) {
if (selectedq[i].checked) {
choice = selectedq[i].value;
}
}
if (choice == 'fallen') {
fallen++;
}
if (choice == 'hive') {
hive++;
}
if (choice == 'vex') {
vex++;
}
if (choice == 'cabal') {
cabal++;
}
}
if (fallen >= hive && fallen >= vex && fallen >= cabal && fallen > 0) {
//fallen is the highest
result = 'fallen';
}
else if (hive > fallen && hive >= vex && hive >= cabal && hive > 0) {
//hive is the highest
result = 'hive';
}
else if (vex > fallen && vex > hive && vex >= cabal && vex > 0) {
//vex is the highest
result = 'vex';
}
else if (cabal > fallen && cabal > hive && cabal > vex && cabal > 0) {
//cabal is the highest
result = 'cabal';
}
else {
result = 'oops';
}
displayRace(result);
}
function displayRace(race) {
var image = document.createElement('img');
image.className = 'q1';
var source = document.getElementById('raceParagraph');
var text = 'Congratulations! You\'re a ' + race + '!';
switch(race) {
case 'fallen':
image.src = 'http://vignette4.wikia.nocookie.net/destinypedia/images/a/a9/Captain.png/revision/latest?cb=20130510122813';
break;
case 'hive':
image.src = 'http://vignette2.wikia.nocookie.net/destinypedia/images/8/8c/Hive_Thrall.png/revision/latest?cb=20140609013118';
break;
case 'vex':
image.src = 'http://vignette3.wikia.nocookie.net/destinypedia/images/b/bc/Vex.png/revision/latest?cb=20140609005540';
break;
case 'cabal':
image.src = 'http://vignette2.wikia.nocookie.net/destinypedia/images/4/48/Cabal_Render.png/revision/latest?cb=20140609170438';
break;
default:
image.src = '';
}
source.appendChild(image);
source.innerHTML += '<br>' + text;
window.onload = init;
}
</script>
</html>
答案 0 :(得分：1)
现在，当我点击按钮提交时，只需将我带回页面顶部并重置答案。
这是因为您有一个type="submit"按钮，并且您没有取消默认表单提交行为 - 在您的情况下，使用没有action的表单，基本上是重新加载页面。将您的按钮更改为type="button"。
除此之外，主要问题是你的JS正在尝试访问一个名为＆＃34; quiz＆＃34;但是在你的HTML中，你不能给表单命名。这会导致出现在浏览器控制台中的异常。
修复这些问题后，如果您展开并运行此代码段，您的代码将会正常工作：
function checkQuiz() {
var question = 1;
var fallen = 0;
var hive = 0;
var vex = 0;
var cabal = 0;
var answer = 1;
var youranswer = 0;
var result = '';
var choice;
for (question = 1; question <= 2; question++) {
var selectedq = document.forms['quiz'].elements['q'+question];
for (var i = 0; i < selectedq.length; i++) {
if (selectedq[i].checked) {
choice = selectedq[i].value;
}
}
if (choice == 'fallen') {
fallen++;
}
if (choice == 'hive') {
hive++;
}
if (choice == 'vex') {
vex++;
}
if (choice == 'cabal') {
cabal++;
}
}
if (fallen >= hive && fallen >= vex && fallen >= cabal && fallen > 0) {
//fallen is the highest
result = 'fallen';
}
else if (hive > fallen && hive >= vex && hive >= cabal && hive > 0) {
//hive is the highest
result = 'hive';
}
else if (vex > fallen && vex > hive && vex >= cabal && vex > 0) {
//vex is the highest
result = 'vex';
}
else if (cabal > fallen && cabal > hive && cabal > vex && cabal > 0) {
//cabal is the highest
result = 'cabal';
}
else {
result = 'oops';
}
displayRace(result);
}
function displayRace(race) {
var image = document.createElement('img');
image.className = 'q1';
var source = document.getElementById('raceParagraph');
var text = 'Congratulations! You\'re a ' + race + '!';
switch(race) {
case 'fallen':
image.src = 'http://vignette4.wikia.nocookie.net/destinypedia/images/a/a9/Captain.png/revision/latest?cb=20130510122813';
break;
case 'hive':
image.src = 'http://vignette2.wikia.nocookie.net/destinypedia/images/8/8c/Hive_Thrall.png/revision/latest?cb=20140609013118';
break;
case 'vex':
image.src = 'http://vignette3.wikia.nocookie.net/destinypedia/images/b/bc/Vex.png/revision/latest?cb=20140609005540';
break;
case 'cabal':
image.src = 'http://vignette2.wikia.nocookie.net/destinypedia/images/4/48/Cabal_Render.png/revision/latest?cb=20140609170438';
break;
default:
image.src = '';
}
source.appendChild(image);
source.innerHTML += '<br>' + text;
}<h1>Which Destiny enemy race are you?</h1>
<form name="quiz">
<p>If you were dresing up for Halloween, what would you dress up as?</p>
<input type="radio" name="q1" value="fallen" checked="checked"> Captain Jack Sparrow
<br><input type="radio" name="q1" value="hive"> A zombie from The Walking Dead
<br><input type="radio" name="q1" value="vex"> The Terminator
<br><input type="radio" name="q1" value="cabal"> A military soldier
<br><br>
<p>Some other question?</p>
<input type="radio" name="q2" value="fallen" checked="checked"> Answer 1
<br><input type="radio" name="q2" value="hive"> Answer 2
<br><input type="radio" name="q2" value="vex"> Answer 3
<br><input type="radio" name="q2" value="cabal"> Answer 4
<br><br>
<input type="button" value="Get results!" onclick="checkQuiz()"> <input type="reset" value="Reset">
</form>
<p id="raceParagraph"></p>
您还应该从第二个功能的末尾删除window.onload = init;。即使您没有名为init的函数这一事实，在页面加载后设置window.onload处理程序也没有意义。