在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>