如何在 marquee 標記中顯示此數組？

Question

如何在<marquee>標記中顯示此數組？ 我無法在 HTML 中顯示這些消息

在這種情況下我能得到一些幫助嗎？

 var messages = [ { name: "Asi", context: "Bla Bla", picture: "asi.jpg" }, { name: "Lior", context: "Bla Bla", picture: "lior.jpg" }, ]; function showMessages() { let messageBox = document.getElementById("messagesBox"); const allTheMessage = messages.map((m) => ( <div> {m.name} <br /> {m.context} <br /> {m.picture} <br /> </div> )); messageBox.innerHTML = allTheMessage.toString(); } showMessages();

 <marquee scrollamount="4" behavior="scroll" direction="down"> <h1 id="messagesBox"></h1> </marquee>

Answer 1

您在 map 回調中沒有有效的 JS。 innerHtml需要

包含元素后代的 HTML 序列化的 DOMString

所以你需要收集模板字符串

 var messages = [ { name: "Asi", context: "Bla Bla", picture: "asi.jpg" }, { name: "Lior", context: "Bla Bla", picture: "lior.jpg" }, ]; function showMessages() { let messageBox = document.getElementById("messagesBox"); const allTheMessage = messages.map(m => `<div>${m.name}<br />${m.context}<br />${m.picture}<br /></div>`); messageBox.innerHTML = allTheMessage.join(''); } showMessages();

 <marquee scrollamount="4" behavior="scroll" direction="down"> <h1 id="messagesBox"></h1> </marquee>