使用按鈕循環訪問數組

好吧，實質上我想創建一個包含下一個和上一個按鈕的簡短測驗。我想循環兩個數組，問題和選擇，並在最後得分。我已經閱讀了關於DOM和事件的章節，它只是沒有明顯的點擊。使用按鈕循環訪問數組

真的，我需要一點代碼來展示如何操作DOM的具體例子。我到目前爲止只有數組和一個函數聲明x實際上是通過id獲取我的元素。哈哈。

對不起，我沒有更多的代碼給。我試圖將id附加到段落中，然後通過它的id和document.write數組來獲取它，但取代了該按鈕。如果你運行下面的代碼，你會看到我在說什麼。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Bom</title> 
</head> 
<body> 
    <input type="button" value="Iterate" id="myButton" onclick="iter_onclick()"> 
    <p id="qArray">Some Text</p> 

    <script> 
     var qArray = ["Who is my dog?", "who is the prez?", "Who is my girlfriend?", "Who am I?"]; 

     var cArray = [["Bill","Billy", "Arnold", "Tyler"],["Oz"," Buffon","Tupac","Amy"],["Tony Blair","Brack Osama","Barack Obama","Little Arlo"],["Emma Stone","Tony the Tiger","","The Smurf Girl"]]; 

     function iter_onclick() { 
      var x = document.getElementById("qArray"); 
      document.write("Hello World"); 
     }   
    </script> 
</body> 
</html>`

就像我說的，這是我第一次嘗試真正操縱DOM，並且我知道我想做什麼。我只是不知道該怎麼做。我正在理解所有的語法，事件和對象等。但是，我不確定如何應用它。另外，沒有Jquery。我想知道如何用Javascript創建應用程序，然後以我的方式進入Jquery。感謝人們。

來源

2013-10-26 Jerry Walker

你爲什麼不使用jQuery？ –

我的意思並不是我不想學習它，而只是我想知道如何去做。所以，當我學習JQuery時，我完全理解它。 –

嘗試http://jsfiddle.net/arunpjohny/DAzns/1/ –

這將遍歷您的問題，希望這可以幫助你繼續。

var qArray = ["Who is my dog?", 
     "who is the prez?", 
     "Who is my girlfriend?", 
     "Who am I?"]; 

var cArray = [ 
    ["Bill", "Billy", "Arnold", "Tyler"], 
    ["Oz", " Buffon", "Tupac", "Amy"], 
    ["Tony Blair", "Brack Osama", "Barack Obama", "Little Arlo"], 
    ["Emma Stone", "Tony the Tiger", "Amy Dahlquist", "The Smurf Girl"] 
]; 

var index = 0; 

function iter_onclick() { 
    //if this is the last question hide and displays quiz ends    
    if (index >= qArray.length) { 
     document.getElementById('qArray').innerHTML = '<div>Quiz End, Thank you</div>' 
     document.getElementById('myButton').style.visibility = 'hidden '; 
     return false; 
    } 

    var html = ' <div> ' + qArray[index] + ' </div> <div>'; 
    for (var i = 0; i < cArray[index].length; i++) { 
     html += '<label><input type="radio" name="ans" value="' 
      + cArray[index][i] + '"/ > ' + cArray[index][i] + ' </label>'; 
    } 
    html += '</div > '; 
    document.getElementById('qArray').innerHTML = html; 

    index++; 
}

來源

2013-10-26 04:43:53 N20084753

謝謝。這真的是我正在尋找的。我會研究它，直到我能記住所有更好的點。在id內寫入html實際上是我想知道的。 –

下面是一個非常基本的例子，你可以從中工作。這會修改現有的DOM項目。您不能在已經加載的文檔上使用document.write()，或者它將清除您擁有的所有內容並重新開始，這不是將內容放入DOM的最有效方式。

本示例在頁面上有許多字段，它會加載一個問題，然後在您按下一個按鈕時檢查答案。

HTML：

<div id="question"></div> 
<input id="answer" type="text"><br><br> 
<button id="next">Next</button> <br><br><br> 
Number Correct So Far: <span id="numCorrect">0</span>

的Javascript（腳本標籤）：

var qArray = ["Who is my dog?", "who is the prez?", "Who is my girlfriend?", "Who am I?"]; 

var cArray = [["Bill","Billy", "Arnold", "Tyler"],["Oz"," Buffon","Tupac","Amy"],["Tony Blair","Brack Osama","Barack Obama","Little Arlo"],["Emma Stone","Tony the Tiger","Amy Dahlquist","The Smurf Girl"]]; 

var questionNum = -1; 
var numCorrect = 0; 

function loadQuestion() { 
    ++questionNum; 
    if (questionNum >= qArray.length) { 
     alert("all questions are done"); 
    } else { 
     document.getElementById("question").innerHTML = qArray[questionNum]; 
     document.getElementById("answer").value = ""; 
    } 
} 

loadQuestion(); 

function checkAnswer() { 
    var answer = document.getElementById("answer").value.toLowerCase(); 
    var allowedAnswers = cArray[questionNum]; 
    for (var i = 0; i < allowedAnswers.length; i++) { 
     if (allowedAnswers[i].toLowerCase() == answer) { 
      return true; 
     } 
    } 
    return false; 
} 

document.getElementById("next").addEventListener("click", function(e) { 
    if (checkAnswer()) { 
     ++numCorrect; 
     document.getElementById("numCorrect").innerHTML = numCorrect; 
     loadQuestion(); 
    } else { 
     alert("Answer is not correct"); 
    } 
});

工作演示：http://jsfiddle.net/jfriend00/gX2Rm/

來源

2013-10-26 04:38:35 jfriend00

嘿謝謝，唯一的理由是我沒有選擇你的頂級答案是因爲，我是一個小白，代碼是一個更加抽象。另外，我正在尋找單選按鈕的選擇。我沒有詳細說明，但很抱歉。謝謝，雖然這對人們也有很大的幫助。 :) –

@JerryWalker - 我希望你能從他們兩位學習。學習其他人的代碼是學習的好方法。 – jfriend00

使用按鈕循環訪問數組

回答

相關問題