Javascript 单击时循环遍历数组

我想知道如何在单击时循环数组中的值？当显示数组的最后一个值时，下一次单击应再次显示数组的第一个值

我认为我很接近，但是当我到达数组的最后一个值时，我必须单击两次，然后它才会再次显示第一个值

以下是我的JavaScript：

var myArray = ["red", "yellow", "green"];
var myIndex = 1;
var print = document.getElementById('print');

print.innerHTML = myArray[0]; //Print first value of array right away.

function nextElement() {
  if (myIndex < myArray.length) {
     print.innerHTML = myArray[myIndex];
     myIndex++;
  }
  else {
     myIndex = 0;   
  }
};

var myArray=[“红色”、“黄色”、“绿色”]；
var-myIndex=1；
var print=document.getElementById（'print'）；
print.innerHTML=myArray[0]//立即打印数组的第一个值。
函数nextElement（）{
if（myIndex

这是我的HTML：

<p>The color is <span id="print"></span>.</p> 

<a id="click" href="#" onclick="nextElement();">Click</a>

颜色是。

如果有帮助，这里有一把小提琴：

---

您可以像这样使用模运算符：

function nextElement() {
  print.innerHTML = myArray[myIndex];
  myIndex = (myIndex+1)%(myArray.length);
  }
};

见：

更极端的是（如zdyn所写）：

---

请参阅：

尽可能简洁：

function nextElement() {
  print.innerHTML = myArray[myIndex++ % myArray.length]
}

---

var print=document.getElementById（'print'）

为什么要给它分配一个变量？ 为什么不直接写呢

document.getElementById（'print'）.innerHTML=myArray[0]//立即打印数组的第一个值。 document.getElementById（'print'）.style.color=myArray[0]//设置id打印的颜色

---

谢谢我想我是因为myArray.length返回值3而被抛出的，但是myArray的最后一个位置是2。非常感谢。因为我只需要键入一次

document.getElementById（'print'）

。我认为将其分配给变量也会缓存对DOM元素的引用，这样就不必再次查找它。

function nextElement() {
  print.innerHTML = myArray[myIndex++ % myArray.length]
}