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的数组功能（直接或使用填充程序），则可以使用新的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 for循环数组只显示结束数组

2 个答案: