循環數組的Javascript僅顯示結束數組

Question

當我運行程序時，僅從我收集的內容中顯示末端數組，這是一個for循環關閉問題。 我從以前的文章中嘗試了很多方法，但是仍然沒有找到解決方案。

Thx Pav

 var words = [ ['how', 'are', 'you', 'today?'], ['what', 'would', 'you', 'like', 'for', 'breakfast?'], ['what', 'would', 'you', 'like', 'for', 'tea?'] ]; var correctInput = [ ['how are you today?'], ['what would you like for breakfast?'], ['what would you like for tea?'] ]; for (i = 0; i<= words.length; i++){ newWords = words[i].slice(0); shuffle(newWords); var el = document.getElementById('phrase'); el.textContent = newWords.join(' '); var form = document.getElementById('myform'); form.addEventListener('submit', checkAnswer(i), false); } function checkAnswer(i){ return function(){ var elMsg = document.getElementById('feedback'); if (document.myForm.textinput.value == correctInput[i]){ elMsg.textContent= "right answer";} else { elMsg.textContent= "wrong answer";} }} function shuffle(newWords) { var counter = newWords.length, temp, index; while (counter > 0) { index = Math.floor(Math.random() * counter); counter--; temp = newWords[counter]; newWords[counter] = newWords[index]; newWords[index] = temp;} return newWords;}

 <!DOCTYPE html> <html> <head> <title>My Page</title> </head> <body> <form name="myForm" id ="myform"> <div id ="phrase"></div> <input type = "text" id = "textinput"> <button id="myBtn">Click here</button> <div id ="feedback"></div> </form> <script src = "phraseScrambler.js"></script> </body> </html>

Answer 1

對於實際數組

（有關類似數組的對象，請參見下面的“用於類似數組的對象”。）

您目前有三個選擇，不久將有兩個選擇：

Use forEach and related (ES5+)
Use a simple for loop
Use for-in correctly
Use for-of (use an iterator implicitly) (ES6+)
Use an iterator explicitly (ES6+)

詳細信息：1.使用forEach及其相關

如果使用的環境支持ECMAScript5的Array功能（直接或使用填充程序），則可以使用新的forEach函數：

var a = ["a", "b", "c"];
a.forEach(function(entry) {
    console.log(entry);
});

Answer 2

當前，您正在遍歷所有項並將文本內容替換為當前項： el.textContent = newWords.join(' '); 因此，當它運行時，它是：

你今天好嗎？
你早餐想吃什么？
您想喝點什么？

並且由於第三次是最后一次運行，所以el.textContent的值保持不變。 因此，與其在頁面加載時運行for循環，不如將新生成的問題放入函數中，例如。 showQuestion並運行一次以啟動游戲。

然后，如果用戶猜對了答案，請顯示下一個問題。 為了跟蹤當前問題，您可以使用一個變量，例如。 currentQuestion 。

另外，每次顯示新問題時，都不應將新的事件偵聽器綁定到“提交”按鈕。 只需在安裝程序上進行即可，例如。 具有名為setup的功能。

 var currentQuestion = 0; var words = [ ['how', 'are', 'you', 'today?'], ['what', 'would', 'you', 'like', 'for', 'breakfast?'], ['what', 'would', 'you', 'like', 'for', 'tea?'] ]; var correctInput = [ ['how are you today?'], ['what would you like for breakfast?'], ['what would you like for tea?'] ]; function showQuestion(i) { if(i < words.length) { document.myForm.textinput.value = ''; newWords = words[i].slice(0); shuffle(newWords); var el = document.getElementById('phrase'); el.textContent = newWords.join(' '); } } function setup() { showQuestion(currentQuestion); var form = document.getElementById('myform'); form.addEventListener('submit', checkAnswer, false); } function checkAnswer(e){ e.preventDefault(); var elMsg = document.getElementById('feedback'); if (document.myForm.textinput.value == correctInput[currentQuestion]) { elMsg.textContent= "right answer"; currentQuestion++; showQuestion(currentQuestion); } else { elMsg.textContent= "wrong answer"; } } function shuffle(newWords) { var counter = newWords.length, temp, index; while (counter > 0) { index = Math.floor(Math.random() * counter); counter--; temp = newWords[counter]; newWords[counter] = newWords[index]; newWords[index] = temp;} return newWords;} setup();

 <!DOCTYPE html> <html> <head> <title>My Page</title> </head> <body> <form name="myForm" id ="myform"> <div id ="phrase"></div> <input type = "text" id = "textinput"> <button id="myBtn">Click here</button> <div id ="feedback"></div> </form> <script src = "phraseScrambler.js"></script> </body> </html>

循環數組的Javascript僅顯示結束數組

問題描述

2 個解決方案

解決方案1
0 2015-05-13 09:41:04

解決方案2
0 2015-05-13 11:28:17

循環數組的Javascript僅顯示結束數組

問題描述

2 個解決方案

解決方案1 0 2015-05-13 09:41:04

解決方案2 0 2015-05-13 11:28:17

解決方案1
0 2015-05-13 09:41:04

解決方案2
0 2015-05-13 11:28:17