将html属性设置为javascript变量时，为什么循环在警报语句之前终止？
[英]why does loop terminate before alert statement when setting an html attribute to a javascript variable?
问题描述
I'm trying to debug the following loop. 
我正在尝试调试以下循环。 I never make it to the last alert("YO"). 我从来没有到最后一个警报（“ YO”）。 Also, interestingly, I am expecting 5 alert(typeof ...), but I am only getting 4. I can't for the life of me figure out why this is. 另外，有趣的是，我期望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 \√(-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>
3 个解决方案
解决方案1
2 2014-10-17 16:13:05
While using attribute selector, If the attribute value contains more than one word, You should include the attribute value inside quotes. 使用属性选择器时，如果属性值包含多个单词，则应在引号中包含属性值。
Currently The following line 当前以下行
$("input[name=" + currentQ.topic + "]:checked")
Throws error when it finds the value "Imaginary Numbers" and the script execution stops, which is why further alerts doesn't appear. 当找到值“ Imaginary Numbers”并且脚本执行停止时引发错误，这就是为什么不再显示警报的原因。
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 \√(-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>
解决方案2
1 已采纳 2014-10-17 16:16:06
The problem is your attribute equals selector doesn't have quotes around the value. 问题是您的属性等于选择器的值周围没有引号。 This fails when the name has a space in it. 当名称中有空格时，此操作将失败。
So use: $("input[name='" + currentQ.topic + "']:checked").val(); 因此，请使用： $("input[name='" + currentQ.topic + "']:checked").val();
Instead of: $("input[name=" + currentQ.topic + "]:checked").val(); 代替： $("input[name=" + currentQ.topic + "]:checked").val();
This was causing a jQuery error and a javascript exception, which immediately terminates your code. 这导致jQuery错误和javascript异常，从而立即终止您的代码。
Full, runnable example: 完整的可运行示例：
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 \√(-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>
解决方案3
1 2014-10-17 16:25:24
I ran it in console and I found that you have a topic what contain a white sapce. 我在控制台中运行它，发现您有一个包含白色汁液的主题。
new Question("Imaginary Numbers", "What is \u221A(-1)^8?", ["i", "-i", 1, -1], 1)
and I got an error: Error: Syntax error, unrecognized expression: input[name=Imaginary Numbers]:checked A solution is to remove the space from the topic Imaginary Numbers, 并且我得到一个错误：错误：语法错误，无法识别的表达式：input [name = Imaginary Numbers]：checked一种解决方案是从“ Imaginary Numbers”主题中删除空格，
new Question("Imaginary_Numbers", "What is \u221A(-1)^8?", ["i", "-i", 1, -1], 1)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如果语句不警告变量 - if statement does not alert variable
当循环跟随语句时，为什么JS Alert在console.log之前执行 - Why does JS alert execute before console.log when a loop is following the statements
为什么当中间参数为“ null”时，for循环会终止？ - Why does a for-loop terminate when the middle parameter is 'null'?
为什么这个特定的Javascript循环仅在重新分配变量时有效？ - Why does this particular Javascript loop only work when reassigning a variable?
为什么循环下面的语句在循环终止之前执行 - why does statement below loop executes before termination of loop
设置属性时，我可以在 Javascript 对象中编写 if 语句吗？ - Can I write an if statement within a Javascript object when setting an attribute?
为什么这个循环中途终止？ - Why does this loop terminate partway through?
JavaScript：在if语句中工作的for循环在三元语句中工作不？ 为什么？ - JavaScript: The `for loop` that works in an `if` statement does not work in a `ternary` statement? Why?
在调用变量之前设置变量-Javascript - Setting a variable before it is called - Javascript
与 JavaScript 相比，从 HTML 设置属性时的不同行为 - Different behavior when setting attribute from HTML compared to JavaScript
相关标签