如何使用onclick進行循環提前？

我正在編寫一個程序，該程序應該顯示一系列基本的多項選擇題。你看到一個問題，你點擊其中一個答案，然後轉到下一個問題。

問題是，我無法弄清楚如何顯示一個問題，然後在用戶單擊其中一個按鈕時顯示下一個問題。當我點擊一個按鈕時沒有任何反應。出了什麼問題？

 // progress meter 
     var progress = new Array(); 
     for (var i = 0; i < questions.length; i++) progress.push("0"); 

     var i = 0; 
     display(0); 

     // display questions 
     function display(i) { 
      var prg_string; 
      for (var j = 0; j < progress.length; j++) prg_string += progress[j]; 
      document.write(
       "<div id = 'background'>" 
        + "<div id = 'progress'>" + progress + "</div>" 
        + "<div id = 'title'>-JogNog Test v1-<br></br>" + tower + "</div>" 
        + "<div id = 'question'>" + questions[i].text + "</div>" 
        + "<div id = 'stats'>Level " + level + "/" + total_levels + " Question " + (i + 1) + "/" + questions.length + "</div>" 
       + "</div>" 
      ); 

      document.write("<button id = 'answer1' onclick = 'next(questions[i].answers[0].correct)'>" + questions[i].answers[0].text + "</button>"); 
      if (questions[i].answers.length > 0) 
       document.write("<button id = 'answer2' onclick = 'next(questions[i].answers[1].correct)'>" + questions[i].answers[1].text + "</button>"); 
      if (questions[i].answers.length > 1) 
       document.write("<button id = 'answer3' onclick = 'next(questions[i].answers[2].correct)'>" + questions[i].answers[2].text + "</button>"); 
      if (questions[i].answers.length > 2) 
       document.write("<button id = 'answer4' onclick = 'next(questions[i].answers[3].correct)'>" + questions[i].answers[3].text + "</button>"); 
     } 

     // go to next question, marking whether answer was right or wrong 
     function next(correct) { 
      if(correct) progress[i] = "T"; 
      else progress[i] = "F"; 
      i += 1; 
      display(i); 
     }

來源

2012-08-15 fawfulfan

你可以發佈一個jsfiddle顯示該問題嗎？ – jbabey 2012-08-15 12:43:43

太長;沒有閱讀... – Alnitak 2012-08-15 12:46:11

jsFiddle：http://jsfiddle.net/tTP8z/ – 2012-08-15 12:46:50

我沒有通過您的代碼閱讀，（你可能想通過重點只是處理該環路的一部分發布SSCCEs工作），但我感覺一個循環是不是你想要的這裏。如果您需要自動遍歷某些內容，循環非常棒。但實際上，您一次只想顯示一個問題。

假設您有一種獨立處理每個問題的方法，最簡單的方法就是記錄用戶需要處理的問題。顯示該問題。當用戶提交答案時，使用計數器調用任何函數來呈現問題，再加上一個。請務必檢查您是否未達到測驗的結尾，以免引用不存在的問題。

下面是一些僞代碼：

var questionNumber, questions; //assume these already have values 
function printQuestion(questionNumber){ ... } 
function nextQuestion(){ 
    if(questionNumber < questions){ 
     questionNumber++; 
     printQuestion(questionNumber); 
    } 
    else{ 
     showResults(); 
    } 
}

來源

2012-08-15 12:48:11

我已經試過了，它不能正常工作...雖然想到它，也許你可以幫我解決這個問題。我會發布它。 – fawfulfan 2012-08-15 12:51:31

@fawfulfan嘗試只關注您認爲失敗的部分代碼。例如，如果不打印，請向我們顯示打印代碼。如果它打印*相同*問題，向我們展示下一個問題類型代碼 – 2012-08-15 12:54:46

在那裏，我修改了代碼，使其更像是你所說的，儘管這仍然行不通，我不明白爲什麼。當你點擊一個按鈕時，沒有任何反應。我的函數調用有什麼問題？ – fawfulfan 2012-08-15 12:55:05

我@ngmiceli同意，一個循環是不是你想要的這裏。您想要顯示一個問題，然後創建點擊事件處理程序，當用戶選擇對上一個問題的答案時，它們將轉到下一個問題。

我繼續並創建了一個不同的設置來演示。你可以在這裏看到一個演示：

-- jsFiddle DEMO --

但我會通過流程走。首先，我建立一個基本的HTML文檔：

<body> 
    <h1>-Test v1-</h1> 
    <h2>Simple Math</h2> 
    <div id="container"> 
     <div><span id="numRight">0</span> of <span id="numQuestions">0</span></div> 
     <div id="question"></div> 
     <div id="answers"></div> 
    </div> 
</body>

然後，我創建了一個問題array，每個元件在陣列中作爲一個object。每個問題對象都包含問題本身，一組可能的答案和一個「answerIdx」屬性，用於指示正確答案的數組索引。

questions = [ 
    { 
     question: 'What is 0/6 ?', 
     options: ['0','1','2'], 
     answerIdx: 0 
    }, 
    { 
     question: 'What is 2 + 2 ?', 
     options: ['72','4','3.5'], 
     answerIdx: 1 
    } 
]

我還創建了指向HTML元素我將要處理一些其他變量：

numRight = 0, 
numQuestions = 0, 
answerDiv = document.getElementById('answers'), 
questionDiv = document.getElementById('question'), 
numRightSpan = document.getElementById('numRight'), 
numQuestionsSpan = document.getElementById('numQuestions');

接下來，我創建了一個「displayQuestion」函數，它接受一個問題對象參數：

function displayQuestion(q) { 
    // insert the question text into the appropriate HTML element 
    questionDiv.innerHTML = q.question; 

    // remove any pre-existing answer buttons 
    answerDiv.innerHTML = ''; 

    // for each option in the 'options' array, create a button 
    // attach an 'onclick' event handler that will update 
    // the question counts and display the next question in the array 
    for(i = 0; i < q.options.length; i++) { 
     btn = document.createElement('button'); 
     btn.innerHTML = q.options[i]; 
     btn.setAttribute('id',i); 

     // event handler for each answer button 
     btn.onclick = function() { 
      var id = parseInt(this.getAttribute('id'),10); 
      numQuestionsSpan.innerHTML = ++numQuestions; 

      // if this is the right answer, increment numRight 
      if(id === q.answerIdx) { 
       numRightSpan.innerHTML = ++numRight; 
      } 

      // if there is another question to be asked, run the function again 
      // otherwise, complete the test however you see fit 
      if(questions.length) { 
       displayQuestion(questions.shift()); 
      } else { 
       alert('Done! You got '+numRight+' of '+numQuestions+' right!'); 
      }      
     } 
     answerDiv.appendChild(btn);   
    } 
}

最後，我顯示的第一個問題：

displayQuestion(questions.shift());

來源

2012-08-15 13:30:21 jackwanders

好吧，現在我已經設法讓按鈕反應，當我點擊。但現在的問題是，單擊按鈕後，沒有任何div被重新創建......它只是顯示普通的舊文本和按鈕。爲什麼不是document.write（）第二次爲div工作？ – fawfulfan 2012-08-15 14:49:40

如何使用onclick進行循環提前？

回答

相關問題