Javascript 如何在从数组中提取间隔时更改innerHTML？

尝试使元素每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>

代理
点击我
函数loopHeader（）{
var loopHeader=setInterval（changeText，1000）；
}
函数changeText（）{
var标题=[“代理”、“专家”、“家庭”、“服务”、“结果”]；
var text=“”；
var i=0；
var x=document.getElementById（“标题”）；
对于（i=0；i

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

函数loopHeader（）{
var loopHeader=setInterval（changeText，1000）；
}
var标题=[“代理”、“专家”、“家庭”、“服务”、“结果”]；
var loopItem=0；
函数changeText（）{
loopItem++；
if（loopItem==headers.length）{
loopItem=0；
}
document.getElementById（“header”）.innerHTML=headers[loopItem]；
}

单击我

这是因为每次调用

changeText

时，它都会通过数组中的文本开始更改按钮的

innerHTML

，所有这些都从索引0到结尾（正在发生，因为它发生得很快，所以您无法看到）。您需要的是在函数外部定义

i

，每次调用该函数时，递增

i

，并在不带循环的数组中显示其相应的值。像这样：

点击我
函数loopHeader（）{
//如果要在单击按钮后立即启动动画，请取消对下一行的注释
//changeText（）；
var loopHeader=setInterval（changeText，1000）；
}
变量i=0；//我用初始值0声明了outside
var headers=[“代理”、“专家”、“家庭”、“服务”、“结果”]；//这也应该在外部（每次调用函数时重新定义它有什么意义）
函数changeText（）{
var x=document.getElementById（“更改头”）；//id是更改头
//增加i并检查它是否超出循环的边界，或者仅使用模运算符不能阻止它超出循环的边界
i=（i+1）%headers.length；
x、 textContent=headers[i]；//textContent比innerHTML好
}

您的ID是

ID=“change header”

但您正在调用

document.getElementById（“header”）更新，参考
代理
@j08691，这是按钮id:P