我正在尝试调试以下循环。我从来没有到最后一个警报(“ YO”)。另外,有趣的是,我期望5个alert(typeof ...),但是我只有4个。
function Question(topic,question,choices,correctAnswer){
this.topic = topic;
this.question = question;
this.choices = choices;
this.correctAnswer = correctAnswer;
this.userAnswer = null;
}
var allQuestions;
allQuestions = [
new Question("Addition", "What is 8 + 8?", [16, 18, 64, 28], 16),
new Question("Subtraction", "What is 23-8?", [16, 15, 14, 17], 15),
new Question("Multiplication", "What is 8 * 8?", [16, 18, 64, 36], 64),
new Question("Division", "What is 48/16", [3, "3/2", 4, "8/3"], 3),
new Question("Imaginary Numbers", "What is \u221A(-1)^8?", ["i", "-i", 1, -1], 1)
];
function qToHTML(question) {
var header = "<h2>" + question.topic + "</h2>";
var qText = "<p>" + question.question + "</p>";
var options = "";
for (var i = 0; i < question.choices.length; i++) {
options += "<input type='radio' name='" + question.topic + "' value ='" + question.choices[i] + "'>" + question.choices[i] + "<br>"
}
var wrapper = "<div class='question'></div>";
var HTMLstring;
HTMLstring = header + qText + options;
$("#question-box").append(HTMLstring).wrap(wrapper);
}
$(document).ready(function(){
//render questions
for(var i = 0; i < allQuestions.length; i++){
qToHTML(allQuestions[i]);
}
//collect and check user answers
$('form').on('submit', function() {
var numCorrect = 0;
for(var i = 0; i < allQuestions.length; i++){
// collect answers
var currentQ = allQuestions[i];
currentQ.userAnswer = $("input[name=" + currentQ.topic + "]:checked").val();
alert(typeof currentQ.correctAnswer);
// check answers
if (currentQ.correctAnswer == currentQ.userAnswer) {
numCorrect++;
}
}
window.alert('YO');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Quiz</title>
</head>
<body>
<H1>Dynamic Quiz</H1>
<form>
<div id="question-box"
<!--
<div class="question">
<h2></h2>
<p></p>
<input type="radio" name="" value="">
<input type="radio" name="" value="">
<input type="radio" name="" value="">
<input type="radio" name="" value="">
</div>-->
</div>
<input type="submit" value="submit">
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
最佳答案
问题是您的attribute equals selector在值周围没有引号。当名称中有空格时,此操作将失败。
因此使用:$("input[name='" + currentQ.topic + "']:checked").val();
代替:$("input[name=" + currentQ.topic + "]:checked").val();
这导致jQuery错误和javascript异常,从而立即终止您的代码。
完整的可运行示例:
function Question(topic,question,choices,correctAnswer){
this.topic = topic;
this.question = question;
this.choices = choices;
this.correctAnswer = correctAnswer;
this.userAnswer = null;
}
var allQuestions;
allQuestions = [
new Question("Addition", "What is 8 + 8?", [16, 18, 64, 28], 16),
new Question("Subtraction", "What is 23-8?", [16, 15, 14, 17], 15),
new Question("Multiplication", "What is 8 * 8?", [16, 18, 64, 36], 64),
new Question("Division", "What is 48/16", [3, "3/2", 4, "8/3"], 3),
new Question("Imaginary Numbers", "What is \u221A(-1)^8?", ["i", "-i", 1, -1], 1)
];
function qToHTML(question) {
var header = "<h2>" + question.topic + "</h2>";
var qText = "<p>" + question.question + "</p>";
var options = "";
for (var i = 0; i < question.choices.length; i++) {
options += "<input type='radio' name='" + question.topic + "' value ='" + question.choices[i] + "'>" + question.choices[i] + "<br>"
}
var wrapper = "<div class='question'></div>";
var HTMLstring;
HTMLstring = header + qText + options;
$("#question-box").append(HTMLstring).wrap(wrapper);
}
$(document).ready(function(){
//render questions
for(var i = 0; i < allQuestions.length; i++){
qToHTML(allQuestions[i]);
}
//collect and check user answers
$('input[type="button"]').on('click', function() {
var numCorrect = 0;
for(var i = 0; i < allQuestions.length; i++){
// collect answers
var currentQ = allQuestions[i];
currentQ.userAnswer = $("input[name='" + currentQ.topic + "']:checked").val();
alert(typeof currentQ.correctAnswer);
// check answers
if (currentQ.correctAnswer == currentQ.userAnswer) {
numCorrect++;
}
}
window.alert('YO');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Quiz</title>
</head>
<body>
<H1>Dynamic Quiz</H1>
<form>
<div id="question-box"
<!--
<div class="question">
<h2></h2>
<p></p>
<input type="radio" name="" value="">
<input type="radio" name="" value="">
<input type="radio" name="" value="">
<input type="radio" name="" value="">
</div>-->
</div>
<input type="button" value="submit">
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
关于javascript - 将html属性设置为javascript变量时,为什么循环在警报语句之前终止?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26429029/