在迭代期间，循环在数组元素上停顿

Question

我试图通过使用'previous'和'next'按钮循环遍历数组，分别在数组中移动。

它可以正常工作，直到你改变'方向'然后试着说，例如'next'然后'previous'

数组显示它已经在的相同元素，而不是显示数组的前一个元素。

例如，我在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

首先，你应该看看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 2

实际上你看起来是预增量而不是后增量。 ++i递增该值然后返回该值，另一方面，i++返回当前值，然后递增该值。

另外一个建议，你不需要一直创建var text，一旦你创建并定义为空，你最好只做text = numbers[--i]without var。

我注意到的另一件事是你的第二个条件（如果）你应该做if (i < numbers.length - 1)因为.lengthmethod开始计数在1。

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

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