在HTML头部连接JS消息循环

Question

我一直在尝试制作一个每小时更换的消息循环（一次只显示一个），我对HTML还可以，但对JS不太擅长。（消息应该放在h3标签中）

我试图将我的JS循环链接到HTML文本元素中，但失败了。

h3 = document.createElement("h3");
var messages = "Message 1", "Message 2", "Message 3", "Message 4", "Message 5", "Message 6";
var counter = 0;

function myLoop() {
  setTimeout(myLoop, 3, 600, 000);
  document.getElementById("Message")
  document.body.appendChild(h3);
}
myLoop();

<h3>
  <h3 id="Message"></h3>
</h3>

Answer 1

1. 不要将标题包裹在标题中
2. 看起来你想要一个消息数组。我在下面展示了如何创建这样一个数组
3. 当元素已经存在于页面上时，不需要使用appendChild
4. 3,600,000不是有效的毫秒数。使用3600000或60*60*1000

在我的代码中，我使用eventListener来等待页面上的html元素可用后再执行

语句(counter++)%len将从0开始，使用余数运算符%在消息数组的长度处进行循环。它避免了if (counter=> length) counter = 0;

=>是一个箭头函数，构造如下

const functionName (parameter) => { };

在功能上等同于（还有一些其他的东西）

function functionName(parameter) { };

如果需要每小时执行一次，请将2000更改为3600000

const messages = ["Message 1", "Message 2", "Message 3", "Message 4", "Message 5", "Message 6"];
const len = messages.length;
let counter = 0;

window.addEventListener("DOMContentLoaded", () => { // 当页面加载完成且h3可用时
  const h3 = document.getElementById("Message");
  const myLoop = () => h3.textContent = messages[(counter++) % len]; // 循环并包装
  myLoop(); // 立即执行一次
  setInterval(myLoop, 2000); // 然后每2秒执行一次
});

<div>
  <h3 id="Message"></h3>
</div>