循环在数组元素上停滞

Question

我试图通过分别使用“上一个”和“下一个”按钮在数组中移动来循环遍历数组。

直到您更改“方向”并尝试说，例如“下一个”然后“上一个”，它都可以正常工作

数组显示的元素已经存在，而不显示数组的前一个元素。

例如，我在4上，单击“上一个”按钮，它仍然在4上。您必须再次按下“上一个”按钮，以使其回到3。

我在这里想念什么...？

 var numbers = ["I am index number 0", "I am index number 1", "I am index number 2", "I am index number 3", "I am index number 4", "I am index number 5"]; var i=0; var text = ""; document.getElementById("back").addEventListener("click", function previous() { if (i-1 >= 0) { var text = numbers[--i]; } document.getElementById("filler").innerHTML = text; }); document.getElementById("forward").addEventListener("click", function next(){ if (i < numbers.length) { var text = numbers[i++]; } document.getElementById("filler").innerHTML = text; }); 

 <p id="filler"></p> <button id="back">PREVIOUS</button> <button id="forward">NEXT</button> 

Answer 1

实际上，您所看到的是递增之前的值，而不是递增之后的值。 ++i递增值，然后返回值，另一方面， i++返回当前值，然后递增值。

还有另一条建议，您不需要一直创建var text ，一旦创建并定义为空，最好只使用text = numbers[--i]而不使用var 。

我注意到的另一件事是，在第二个条件（if）中，应该执行if (i < numbers.length - 1)因为.length方法从1开始计数。

我为你做了一个jsfidddle :) https://jsfiddle.net/t2cjf5m8/16/

Answer 2

首先，您应该看看Crayon Violent的评论

--i递减该值，然后返回该值。 i ++返回当前值，然后递增。 如果希望它们的行为相同，请使用--i和++ i或在索引引用之外进行操作。

您不应该在ifs中重新定义文本

var text = numbers[--i];

下面的解决方案有效：

  var numbers = ["I am index number 0", "I am index number 1", "I am index number 2", "I am index number 3", "I am index number 4", "I am index number 5"]; var i = -1; var text = ""; document.getElementById("back").addEventListener("click", function previous() { if (i > 0) { text = numbers[--i]; } document.getElementById("filler").innerHTML = text; }); document.getElementById("forward").addEventListener("click", function next(){ if (i < numbers.length - 1) { text = numbers[++i]; } document.getElementById("filler").innerHTML = text; }); 

 <p id="filler"></p> <button id="back">PREVIOUS</button> <button id="forward">NEXT</button> 

Answer 3

我在下面修改了您的代码以使其正常工作：

<p id="filler"></p>
<button id="back">PREVIOUS</button>
<button id="forward">NEXT</button>


<script>
    var numbers = [
        "I am index number 0",
        "I am index number 1",
        "I am index number 2 ",
        "I am index number 3",
        "I am index number 4",
        "I am index number 5"
    ];
    var i = 0;
    var text = "";



    document.getElementById("back").addEventListener("click", function previous() {
        if (i - 1 >= 0) {
            var text = numbers[i--];
            document.getElementById("filler").innerHTML = text;
        }
    });




    document.getElementById("forward").addEventListener("click", function next() {
        if (i < numbers.length) {
            var text = numbers[i++];
            document.getElementById("filler").innerHTML = text;
        }
    });
</script>

我所做的唯一更改是在var text = numbers[i--]; 我从左到右更改了操作员的位置。 "If the operator appears before the variable, the value is modified before the expression is evaluated. If the operator appears after the variable, the value is modified after the expression is evaluated." 引用自： https : //docs.microsoft.com/en-us/scripting/javascript/reference/increment-and-decrement-operators-javascript