javascript - 如何更改从数组中提取时间间隔的innerHTML？

Question

尝试让元素每 x 秒更改一次。当我单击按钮时，它应该更改innerHTML，循环遍历数组。下面的代码更改文本，但显示数组中的最后结果。

<h1 id="header">Agent</h1>
<button id="change-header" onclick="loopHeader()">Click Me</button>

<script>
function loopHeader() {
  var loopHeader = setInterval(changeText, 1000);
}

function changeText() {
  var headers = ["Agent", "Expert", "Homes", "Service", "Results"];
  var text = "";
  var i = 0;
  var x = document.getElementById("header");
  for (i = 0; i < headers.length; i++) {
    text = headers[i];
    x.innerHTML = text;
  }
}
</script>

Answer 1

将计数移到函数之外，然后继续循环并在结束时重置为 0。

function loopHeader() {
  var loopHeader = setInterval(changeText, 1000);
}

var headers = ["Agent", "Expert", "Homes", "Service", "Results"];
var loopItem = 0;

function changeText() {
  loopItem++;
  if (loopItem == headers.length) {
    loopItem = 0;
  }
  document.getElementById("header").innerHTML = headers[loopItem];
}
</script>

<div id="header">
  
 </div>
<button id="change-header" onclick="loopHeader()">Click Me</button>