我正在创建一个多项选择测验。由于某种原因它没有运行。我已经通过javascript控制台运行它并且它一直告诉我submitAnswer不是一个函数。 这是javascript代码：
var userAnswers = [];
var answered = 0;
var questions = [question1, question2, question3, question4, question5, question6, question7, question8, question9, question10];
var answers = [q1a, q1b, q1c, q1d, q2a, q2b, q2c, q2d, q3a, q3b, q3c, q3d, q4a, q4b, q4c, q4d, q5a, q5b, q5c, q5d, q6a, q6b, q6c, q6d, q7a, q7b, q7c, q7d];
function resetQuiz(showConfirm) {
if(showConfirm)
if(!confirm("Are you sure you want to reset the quiz and start from the beginning?"))
return false;
document.location = document.location;
}
var submitAnswer = function(questionId, obj, classId, labelId) {
userAnswers[questionId] = answers.value;
document.getElementById(labelId).style.fontWeight = "bold";
disableQuestion(classId);
showResult(questionId);
answered++;
};
var submitAnswer = function() {
var answer = document.getElementById(submitq1);
userAnswers.push[answer];
};
console.log(userAnswers);
function showScore() {
if(answered != answered.length) {
alert("You have not answered all of the questions yet!");
return false;
}
var questionCount = answered.length;
var correct = 0;
var incorrect = 0;
for(var i=0;i<questionCount;i++) {
if(userAnswers[i] == answered[i])
correct++;
else
incorrect++;
}
var response = ["10", "9", "8", "7", "6", "5", "4", "3", "2", "1", "0"];
var pc = Math.round((correct / questionCount) * 100);
var alertMsg = "You scored " + correct + " out of " + "10" + "\n\n";
if(pc == 100)
alertMsg += response[0];
else if(pc >= 90)
alertMsg += response[1];
else if(pc>= 80)
alertMsg += response[2];
else if(pc >= 70)
alertMsg += response[3];
else if(pc > 60)
alertMsg += response[4];
else if(pc >= 50)
alertMsg += response[5];
else if(pc >= 40)
alertMsg += response[6];
else if(pc >= 30)
alertMsg += response[7];
else if(pc>= 20)
alertMsg += response[8];
else if(pc >= 10)
alertMsg += response[9];
else if(pc >= 0)
alertMsg += response[10];
if(pc < 100) {
if(confirm(alertMsg))
resetQuiz(false);
else
return false;
} else {
alert(alertMsg);
}
}
function disableQuestion(classId) {
var alltags=document.all? document.all : document.getElementsByTagName("*");
for (var i=0; i<alltags.length; i++) {
if (alltags[i].className == classId) {
alltags[i].disabled = true;
}
}
};
html代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body style="background-color: lightblue;">
<h1>Driving Test</h1>
<p class="questions">1. At what minimum distance away from a railroad should you stop?</p>
<img src="q1.jpg" alt="Mountain View" style="width:304px;height:228px;">
<ul class="answers" id="question1">
<input type="radio" name="q1" value="a" id="q1a">a. 6 meters from the nearest rail</label><br/>
<input type="radio" name="q1" value="b" id="q1b">b. 5 meters from the nearest rail</label><br/>
<input type="radio" name="q1" value="c" id="q1c">c. 10 meters from the nearest rail</label><br/>
<input type="radio" name="q1" value="d" id="q1d">d. 3 meters from the nearest rail</label><br/>
</ul>
<input type="button" value="submit" id="submitq1" onclick="submitAnswer();">
<p class="questions">2. When should you slow down to 30km/h near a playground?</p>
<img src="q2.jpg" alt="Mountain View" style="width:304px;height:228px;">
<ul class="answers" id="question2">
<input type="radio" name="q2" value="a" id="q2a">a. as soon as you notice that you are near a playground</label><br/>
<input type="radio" name="q2" value="b" id="q2b">b. when you see the playground sign</label><br/>
<input type="radio" name="q2" value="c" id="q2c">c. when you see the playground sign with a 30km/h limit</label><br/>
<input type="radio" name="q2" value="d" id="q2d">d. from dusk to dawn when you see the playground sign with a 30km/h limit</label><br/>
</ul>
<input type="button" value="submit" id="submitq2" onclick="submitAnswer();">
<p class="questions">3. A light with a steady red cross above a lane of traffic means:</p>
<img src="q3.jpg" alt="Mountain View" style="width:304px;height:228px;">
<ul class="answers" id="question3">
<input type="radio" name="q3" value="a" id="q3a">a. proceed with caution</label><br/>
<input type="radio" name="q3" value="b" id="q3b">b. begin moving out of this lane and into one with a green arrow</label><br/>
<input type="radio" name="q3" value="c" id="q3c">c. you cannot drive in this lane</label><br/>
<input type="radio" name="q3" value="d" id="q3d">Answer 4</label><br/>
</ul>
<input type="button" value="submit" id="submitq3" onclick="submitAnswer();">
<p class="questions">4. When entering a freeway you should always:</p>
<img src="q4.jpg" alt="Mountain View" style="width:304px;height:228px;">
<ul class="answers" id="question4">
<input type="radio" name="q4" value="a" id="q4a">a. slow down and proceed when it is safe</label><br/>
<input type="radio" name="q4" value="b" id="q4b">b. stop and make sure this is no traffic approaching</label><br/>
<input type="radio" name="q4" value="c" id="q4c">c. signal, accelerate to the same speed as the freeway traffic and merge smoothly</label><br/>
<input type="radio" name="q4" value="d" id="q4d">d. go as fast as you can and swing into traffic</label><br/>
</ul>
<input type="button" value="submit" id="submitq4" onclick="submitAnswer();">
<p class="questions">5. What is the minimum following distance you should leave between your vehicle and a motorcycle in front of you?</p>
<img src="q5.jpg" alt="Mountain View" style="width:304px;height:228px;">
<ul class="answers" id="question5">
<input type="radio" name="q5" value="a" id="q5a">a. 2 seconds</label><br/>
<input type="radio" name="q5" value="b" id="q5b">b. 3 seconds</label><br/>
<input type="radio" name="q5" value="c" id="q5c">c. 4 seconds</label><br/>
<input type="radio" name="q5" value="d" id="q5d">d. 5 seconds</label><br/>
</ul>
<input type="button" value="submit" id="submitq5" onclick="submitAnswer();">
<p class="questions">6. To help prevent collision with an animal you should:</p>
<img src="q6.jpg" alt="Mountain View" style="width:304px;height:228px;">
<ul class="answers" id="question6">
<input type="radio" name="q6" value="a" id="q5a">a. scan the sides of the road ahead for animals</label><br/>
<input type="radio" name="q6" value="b" id="q5b">b. watch for animal crossing signs</label><br/>
<input type="radio" name="q6" value="c" id="q5c">c. be extra cautious at dusk and dawn</label><br/>
<input type="radio" name="q6" value="d" id="q6d">d. all of the above</label><br/>
</ul>
<input type="button" value="submit" id="submitq6" onclick="submitAnswer();">
<p class="questions">7. If your tire blows while driving you should:</p>
<img src="q7.jpg" alt="Mountain View" style="width:304px;height:228px;">
<ul class="answers" id="question7">
<input type="radio" name="q7" value="a" id="q7a">a. slam on the brakes, hold the wheel firmly and pull over</label><br/>
<input type="radio" name="q7" value="b" id="q7b">b. drive as fast as you can to the nearest service station</label><br/>
<input type="radio" name="q7" value="c" id="q7c">c. ease off the gas pedal, hold the wheel firmly, signal and pull over</label><br/>
<input type="radio" name="q7" value="d" id="q7d">d. stop right away to avoid ruining your tires even more</label><br/>
</ul>
<input type="button" value="submit" id="submitq7" onclick="submitAnswer();">
<p class="questions">8. If you are in an accident you must:</p>
<img src="q8.jpg" alt="Mountain View" style="width:304px;height:228px;">
<ul class="answers" id="question8">
<input type="radio" name="q8" value="a" id="q8a">a. stop to give assitance and give your number and insurance info to others involved</label><br/>
<input type="radio" name="q8" value="b" id="q8b">b. stop only if the accident is serious</label><br/>
<input type="radio" name="q8" value="c" id="q8c">c. stop only to check whether damage has occured</label><br/>
<input type="radio" name="q8" value="d" id="q8d">d. only if someone is injured</label><br/>
</ul>
<input type="button" value="submit" id="submitq8" onclick="submitAnswer();">
<p class="questions">9. This sign means:</p>
<img src="q9.jpg" alt="Mountain View" style="width:304px;height:228px;">
<ul class="questions" id="question9">
<input type="radio" name="q9" value="a" id="q9a">a. use your headlights</label><br/>
<input type="radio" name="q9" value="b" id="q9b">b. winding road ahead</label><br/>
<input type="radio" name="q9" value="c" id="q9c">c. road may be slippery ahead</label><br/>
<input type="radio" name="q9" value="d" id="q9d">d. curve ahead</label><br/>
</ul>
<input type="button" value="submit" id="submitq9" onclick="submitAnswer();">
<p class="questions">10. When approaching a railway crossing you should always:</p>
<img src="q10.jpg" alt="Mountain View" style="width:304px;height:228px;">
<ul class="answers" id="question10">
<input type="radio" name="q10" value="a" id="q10a">a. look for advance warning signs</label><br/>
<input type="radio" name="q10" value="b" id="q10b">b. watch out for all other road users</label><br/>
<input type="radio" name="q10" value="c" id="q10c">c. observe carefully as train often appear to move more slowly than they are</label><br/>
<input type="radio" name="q10" value="d" id="q10d">d. all of the above</label><br/>
</ul>
<input type="button" value="submit" id="submitq10" onclick="submitAnswer();">
<div id="question1">
<p>
<strong>Question 1:</strong> The correct answer is the <strong>Answer 2</strong>.</p>
</div>
<div id="question2">
<p>
<strong>Question 2:</strong> The correct answer is <strong>Answer 4</strong>.</p>
</div>
<div id="question3">
<p>
<strong>Question 3:</strong> The correct answer is <strong>Answer 3</strong>.</p>
</div>
<div id="question4">
<p>
<strong>Question 4:</strong> The correct answer is <strong>Answer 3</strong>.</p>
</div>
<div id="question5">
<p>
<strong>Question 5:</strong> The correct answer is <strong>Answer 2</strong>.</p>
</div>
<div id="question6">
<p>
<strong>Question 6:</strong> The correct answer is <strong>Answer 4</strong>.</p>
</div>
<div id="question7">
<p>
<strong>Question 7:</strong> The correct answer is <strong>Answer 3</strong>.</p>
</div>
<div id="question8">
<p>
<strong>Question 8:</strong> The correct answer is <strong>Answer 1</strong>.</p>
</div>
<div id="question9">
<p>
<strong>Question 9:</strong> The correct answer is <strong>Answer 3</strong>.</p>
</div>
<div id="question10">
<p>
<strong>Question 10:</strong> The correct answer is <strong>Answer 4</strong>.</p>
</div>
<div id="category11">
<p>
All answers are correct</p>
</div>
<script src="groupproject.js"></script>
</body>
</html>
答案 0 :(得分：2)
它之所以说submitAnswer不是一个函数是因为你已经将它定义为一个变量，所以JS不会正确地提升它。而不是使用
var submitAnswer= function(blah){blah}
只需使用
function submitAnswer(blah){blah}
另外，请确保您似乎已经两次声明submitAnswer。确保使用正确的。
答案 1 :(得分：0)
我不确定为什么它说submitAnswer不是一个函数，但你已经定义了两个函数，这些函数具有JS中不允许的相同名称。 尝试重命名其中一个或按建议here更改参数列表，然后在问题继续时发布更多信息。
答案 2 :(得分：0)
Javascript中的函数通常以下列方式定义：
function submitAnswer(){
//code here
}
然后可以在声明后调用。如果您有多个具有相同名称的函数，则可以通过为每个函数提供不同的参数列表来重载它。
答案 3 :(得分：0)
这里有几点需要解决，我将尝试指出最严重的问题：
首先，您有函数submitAnswer的重复声明：
var submitAnswer = function(questionId, obj, classId, labelId) {
userAnswers[questionId] = answers.value;
document.getElementById(labelId).style.fontWeight = "bold";
disableQuestion(classId);
showResult(questionId);
answered++;
};
var submitAnswer = function() {
var answer = document.getElementById(submitq1);
userAnswers.push[answer];
};
我猜你只想要其中一个，当这样写时，第二个会覆盖第一个。我猜它是你想要保留的第一个，因为它似乎是最完整的。
其次，你的问题6有错误的ID
<ul class="answers" id="question6">
<input type="radio" name="q6" value="a" id="q5a">a. scan the sides of the road ahead for animals</label><br/>
<input type="radio" name="q6" value="b" id="q5b">b. watch for animal crossing signs</label><br/>
<input type="radio" name="q6" value="c" id="q5c">c. be extra cautious at dusk and dawn</label><br/>
<input type="radio" name="q6" value="d" id="q6d">d. all of the above</label><br/>
</ul>
如果循环遍历此数组以使其与id匹配，则无法获得正确的元素，请将id更改为'q6 [a | b | c | d]'。
当你解决了这个问题后，下一步就是创建你的submitAnswer函数，你想要它如何在你的例子中工作有点不清楚。
一个好的第一步是将您的view / html结构与逻辑/ JavaScript分开，并阅读参数如何传递给函数，我已经清理了一些代码，为您提供了这个代码段的一个垫脚石：
var userAnswers = [];
var answered = 0;
var questions = [question1, question2, question3, question4, question5, question6, question7, question8, question9, question10];
var answers = [q1a, q1b, q1c, q1d, q2a, q2b, q2c, q2d, q3a, q3b, q3c, q3d, q4a, q4b, q4c, q4d, q5a, q5b, q5c, q5d, q6a, q6b, q6c, q6d, q7a, q7b, q7c, q7d];
function resetQuiz(showConfirm) {
if (showConfirm)
if (!confirm("Are you sure you want to reset the quiz and start from the beginning?"))
return false;
document.location = document.location;
}
var submitAnswer = function() {
console.log("submitted answer!");
};
function showScore() {
if (answered != answered.length) {
alert("You have not answered all of the questions yet!");
return false;
}
var questionCount = answered.length;
var correct = 0;
var incorrect = 0;
for (var i = 0; i < questionCount; i++) {
if (userAnswers[i] == answered[i])
correct++;
else
incorrect++;
}
var response = ["10", "9", "8", "7", "6", "5", "4", "3", "2", "1", "0"];
var pc = Math.round((correct / questionCount) * 100);
var alertMsg = "You scored " + correct + " out of " + "10" + "\n\n";
if (pc == 100)
alertMsg += response[0];
else if (pc >= 90)
alertMsg += response[1];
else if (pc >= 80)
alertMsg += response[2];
else if (pc >= 70)
alertMsg += response[3];
else if (pc > 60)
alertMsg += response[4];
else if (pc >= 50)
alertMsg += response[5];
else if (pc >= 40)
alertMsg += response[6];
else if (pc >= 30)
alertMsg += response[7];
else if (pc >= 20)
alertMsg += response[8];
else if (pc >= 10)
alertMsg += response[9];
else if (pc >= 0)
alertMsg += response[10];
if (pc < 100) {
if (confirm(alertMsg))
resetQuiz(false);
else
return false;
} else {
alert(alertMsg);
}
}
function disableQuestion(classId) {
var alltags = document.all ? document.all : document.getElementsByTagName("*");
for (var i = 0; i < alltags.length; i++) {
if (alltags[i].className == classId) {
alltags[i].disabled = true;
}
}
};<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body style="background-color: lightblue;">
<h1>Driving Test</h1>
<p class="questions">1. At what minimum distance away from a railroad should you stop?</p>
<img src="q1.jpg" alt="Mountain View" style="width:304px;height:228px;">
<ul class="answers" id="question1">
<input type="radio" name="q1" value="a" id="q1a">a. 6 meters from the nearest rail</label>
<br/>
<input type="radio" name="q1" value="b" id="q1b">b. 5 meters from the nearest rail</label>
<br/>
<input type="radio" name="q1" value="c" id="q1c">c. 10 meters from the nearest rail</label>
<br/>
<input type="radio" name="q1" value="d" id="q1d">d. 3 meters from the nearest rail</label>
<br/>
</ul>
<input type="button" value="submit" id="submitq1" onclick="submitAnswer();">
<p class="questions">2. When should you slow down to 30km/h near a playground?</p>
<img src="q2.jpg" alt="Mountain View" style="width:304px;height:228px;">
<ul class="answers" id="question2">
<input type="radio" name="q2" value="a" id="q2a">a. as soon as you notice that you are near a playground</label>
<br/>
<input type="radio" name="q2" value="b" id="q2b">b. when you see the playground sign</label>
<br/>
<input type="radio" name="q2" value="c" id="q2c">c. when you see the playground sign with a 30km/h limit</label>
<br/>
<input type="radio" name="q2" value="d" id="q2d">d. from dusk to dawn when you see the playground sign with a 30km/h limit</label>
<br/>
</ul>
<input type="button" value="submit" id="submitq2" onclick="submitAnswer();">
<p class="questions">3. A light with a steady red cross above a lane of traffic means:</p>
<img src="q3.jpg" alt="Mountain View" style="width:304px;height:228px;">
<ul class="answers" id="question3">
<input type="radio" name="q3" value="a" id="q3a">a. proceed with caution</label>
<br/>
<input type="radio" name="q3" value="b" id="q3b">b. begin moving out of this lane and into one with a green arrow</label>
<br/>
<input type="radio" name="q3" value="c" id="q3c">c. you cannot drive in this lane</label>
<br/>
<input type="radio" name="q3" value="d" id="q3d">Answer 4</label>
<br/>
</ul>
<input type="button" value="submit" id="submitq3" onclick="submitAnswer();">
<p class="questions">4. When entering a freeway you should always:</p>
<img src="q4.jpg" alt="Mountain View" style="width:304px;height:228px;">
<ul class="answers" id="question4">
<input type="radio" name="q4" value="a" id="q4a">a. slow down and proceed when it is safe</label>
<br/>
<input type="radio" name="q4" value="b" id="q4b">b. stop and make sure this is no traffic approaching</label>
<br/>
<input type="radio" name="q4" value="c" id="q4c">c. signal, accelerate to the same speed as the freeway traffic and merge smoothly</label>
<br/>
<input type="radio" name="q4" value="d" id="q4d">d. go as fast as you can and swing into traffic</label>
<br/>
</ul>
<input type="button" value="submit" id="submitq4" onclick="submitAnswer();">
<p class="questions">5. What is the minimum following distance you should leave between your vehicle and a motorcycle in front of you?</p>
<img src="q5.jpg" alt="Mountain View" style="width:304px;height:228px;">
<ul class="answers" id="question5">
<input type="radio" name="q5" value="a" id="q5a">a. 2 seconds</label>
<br/>
<input type="radio" name="q5" value="b" id="q5b">b. 3 seconds</label>
<br/>
<input type="radio" name="q5" value="c" id="q5c">c. 4 seconds</label>
<br/>
<input type="radio" name="q5" value="d" id="q5d">d. 5 seconds</label>
<br/>
</ul>
<input type="button" value="submit" id="submitq5" onclick="submitAnswer();">
<p class="questions">6. To help prevent collision with an animal you should:</p>
<img src="q6.jpg" alt="Mountain View" style="width:304px;height:228px;">
<ul class="answers" id="question6">
<input type="radio" name="q6" value="a" id="q6a">a. scan the sides of the road ahead for animals</label>
<br/>
<input type="radio" name="q6" value="b" id="q6b">b. watch for animal crossing signs</label>
<br/>
<input type="radio" name="q6" value="c" id="q6c">c. be extra cautious at dusk and dawn</label>
<br/>
<input type="radio" name="q6" value="d" id="q6d">d. all of the above</label>
<br/>
</ul>
<input type="button" value="submit" id="submitq6" onclick="submitAnswer();">
<p class="questions">7. If your tire blows while driving you should:</p>
<img src="q7.jpg" alt="Mountain View" style="width:304px;height:228px;">
<ul class="answers" id="question7">
<input type="radio" name="q7" value="a" id="q7a">a. slam on the brakes, hold the wheel firmly and pull over</label>
<br/>
<input type="radio" name="q7" value="b" id="q7b">b. drive as fast as you can to the nearest service station</label>
<br/>
<input type="radio" name="q7" value="c" id="q7c">c. ease off the gas pedal, hold the wheel firmly, signal and pull over</label>
<br/>
<input type="radio" name="q7" value="d" id="q7d">d. stop right away to avoid ruining your tires even more</label>
<br/>
</ul>
<input type="button" value="submit" id="submitq7" onclick="submitAnswer();">
<p class="questions">8. If you are in an accident you must:</p>
<img src="q8.jpg" alt="Mountain View" style="width:304px;height:228px;">
<ul class="answers" id="question8">
<input type="radio" name="q8" value="a" id="q8a">a. stop to give assitance and give your number and insurance info to others involved</label>
<br/>
<input type="radio" name="q8" value="b" id="q8b">b. stop only if the accident is serious</label>
<br/>
<input type="radio" name="q8" value="c" id="q8c">c. stop only to check whether damage has occured</label>
<br/>
<input type="radio" name="q8" value="d" id="q8d">d. only if someone is injured</label>
<br/>
</ul>
<input type="button" value="submit" id="submitq8" onclick="submitAnswer();">
<p class="questions">9. This sign means:</p>
<img src="q9.jpg" alt="Mountain View" style="width:304px;height:228px;">
<ul class="questions" id="question9">
<input type="radio" name="q9" value="a" id="q9a">a. use your headlights</label>
<br/>
<input type="radio" name="q9" value="b" id="q9b">b. winding road ahead</label>
<br/>
<input type="radio" name="q9" value="c" id="q9c">c. road may be slippery ahead</label>
<br/>
<input type="radio" name="q9" value="d" id="q9d">d. curve ahead</label>
<br/>
</ul>
<input type="button" value="submit" id="submitq9" onclick="submitAnswer();">
<p class="questions">10. When approaching a railway crossing you should always:</p>
<img src="q10.jpg" alt="Mountain View" style="width:304px;height:228px;">
<ul class="answers" id="question10">
<input type="radio" name="q10" value="a" id="q10a">a. look for advance warning signs</label>
<br/>
<input type="radio" name="q10" value="b" id="q10b">b. watch out for all other road users</label>
<br/>
<input type="radio" name="q10" value="c" id="q10c">c. observe carefully as train often appear to move more slowly than they are</label>
<br/>
<input type="radio" name="q10" value="d" id="q10d">d. all of the above</label>
<br/>
</ul>
<input type="button" value="submit" id="submitq10" onclick="submitAnswer();">
<div id="question1">
<p>
<strong>Question 1:</strong> The correct answer is the <strong>Answer 2</strong>.</p>
</div>
<div id="question2">
<p>
<strong>Question 2:</strong> The correct answer is <strong>Answer 4</strong>.</p>
</div>
<div id="question3">
<p>
<strong>Question 3:</strong> The correct answer is <strong>Answer 3</strong>.</p>
</div>
<div id="question4">
<p>
<strong>Question 4:</strong> The correct answer is <strong>Answer 3</strong>.</p>
</div>
<div id="question5">
<p>
<strong>Question 5:</strong> The correct answer is <strong>Answer 2</strong>.</p>
</div>
<div id="question6">
<p>
<strong>Question 6:</strong> The correct answer is <strong>Answer 4</strong>.</p>
</div>
<div id="question7">
<p>
<strong>Question 7:</strong> The correct answer is <strong>Answer 3</strong>.</p>
</div>
<div id="question8">
<p>
<strong>Question 8:</strong> The correct answer is <strong>Answer 1</strong>.</p>
</div>
<div id="question9">
<p>
<strong>Question 9:</strong> The correct answer is <strong>Answer 3</strong>.</p>
</div>
<div id="question10">
<p>
<strong>Question 10:</strong> The correct answer is <strong>Answer 4</strong>.</p>
</div>
<div id="category11">
<p>
All answers are correct</p>
</div>
</body>
</html>
如果你正在学习编程，你应该尝试自己做其余的事情，但是如果你只是为你的网站/项目寻找多项选择，我建议你研究现有的一些现有的quizes /多选择
其中一个（披露：我为之开发）是H5P plugin，其内容类型为multiple choice。它完全免费且开源，您可以查看github上的代码。