Verbinden Sie die JS-Nachrichtenschleife im HTML-Header

Question

Ich habe versucht, eine Nachrichtenschleife zu erstellen, die sich stündlich ändert (es wird jeweils nur eine angezeigt). Mit HTML komme ich zurecht, aber mit JS nicht so gut. (Die Nachricht sollte im h3-Tag platziert werden)

Ich habe versucht, meine JS-Schleife in ein HTML-Textelement zu verknüpfen, aber es ist fehlgeschlagen.

h3 = document.createElement("h3");
var message = „Nachricht 1“, „Nachricht 2“, „Nachricht 3“, „Nachricht 4“, „Nachricht 5“, „Nachricht 6“;
var counter = 0;

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

<h3>
  <h3 id="Nachricht"></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>