爲什麼在將alert屬性設置爲javascript變量時，循環會在alert語句之前終止？

我想調試下面的循環。我從來沒有達到最後的警戒狀態（「YO」）。此外，有趣的是，我期待5警報（typeof ...），但我只得到4.我不能爲我的生活弄清楚爲什麼這是。爲什麼在將alert屬性設置爲javascript變量時，循環會在alert語句之前終止？

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>

來源

2014-10-17 Goodword

請發佈完整的代碼示例。 – j08691 2014-10-17 16:04:49

此外，我強烈建議使用'console.log'進行調試，而不是提醒！ – berrberr 2014-10-17 16:06:16

字。我還添加了完整代碼 – Goodword 2014-10-17 16:07:23

的問題是你的attribute equals selector圍繞價值沒有引號。當名稱中有空格時會失敗。

所以使用：$("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>

來源

2014-10-17 16:16:06 dave

非常感謝，這解決了我的問題。但是，問題是爲什麼停止警戒（「YO」）。這些事件似乎完全不相關... – Goodword 2014-10-17 16:23:41

這是造成jQuery錯誤和JavaScript異常，它會立即終止您的代碼。 – dave 2014-10-17 16:25:43

@dave請不要刪除非工作答案併發布新答案，請編輯您現有的答案，然後取消刪除它......已刪除的答案對於部分社區仍然可見...... – 2014-10-17 16:31:56

在使用屬性選擇，如果屬性值包含多個單詞，您應該包括引號內的屬性值。

目前是以下行

$("input[name=" + currentQ.topic + "]:checked")

當它發現價值「虛數」和腳本執行停止，這就是爲什麼其它警告不會出現引發錯誤。

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>

來源

2014-10-17 16:13:05

你的意思是「虛數」應該是「虛數」？如果是這樣，那就解決了我的問題的第二部分 - 現在我得到5個typeof警報。但我仍然沒有得到最後的警報（'YO！'）。 – Goodword 2014-10-17 16:18:47

@Goodword我想知道爲什麼你接受了與我的答案相同的遲到答案。我在上面的代碼中得到了'YO'的提示...... – 2014-10-17 16:25:27

@TJ +1對你來說，你確實是第一次。對不起，如果我複製你的答案，我在你的答案發布之前正在處理它。 – dave 2014-10-17 16:30:22

我跑了它在控制檯中，我發現，你所擁有的含有白色sapce的話題。

new Question("Imaginary Numbers", "What is \u221A(-1)^8?", ["i", "-i", 1, -1], 1)

和我收到一個錯誤：錯誤：語法錯誤，不能識別的表達式：輸入[名稱=虛數]：檢查一種解決方案是從主題虛數去除空間，

new Question("Imaginary_Numbers", "What is \u221A(-1)^8?", ["i", "-i", 1, -1], 1)

來源

2014-10-17 16:25:24 user3391726

爲什麼在將alert屬性設置爲javascript變量時，循環會在alert語句之前終止？

回答

相關問題