如何動態顯示從 Javascript 到 HTML 的對象數組中的所有項目？

Question

我是 Javascript 的新手，在作業中我被指示創建 2 個JS文件，然后在 HTML 中動態顯示數據。 一個 JS 文件data.js文件有一array of objects （產品目錄），另一個 JS 文件有 function 加載這些項目，創建 HTML 元素並在 Z4C4AD5FCA2E7A3F74DBB1CED00381 頁面上顯示項目（目錄）。 但是我的代碼不起作用並且沒有以所需的格式顯示產品？ css 也沒有加載到 function 中。 我注意到某些語法，所以我在 loadProducts() 中注釋了該代碼。 我附上屏幕截圖作為 function 預計如何工作的參考。 請在這方面幫助我。

 // data.js var catalog = [ { code: 100, name: "Learn JS", desc: "To make your web paged dynamic", price: 150, image: "/images/100Tshirt.jpg" }, { code:101, name: "T Shirt", desc: "Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.", price: 0, image: "/images/101Tshirt.jpg" }, { code:102, name: "T Shirt", desc: "Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.", price: 0, image: "/images/102Tshirt.jpg" } // { // name: "Meowsalot", // species: "Cat", // favFoods: ["tuna", "catnip", "celery"], // birthYear: 2012, // photo: "https://learnwebcode.github.io/json-example/images/cat-1.jpg" // ]; // codeboutique.js function chargerArticles() { var articles = document.getElementById("content"); for (var i =0; i <= catalog.length; i++) { var article = document.createElement("div"); article.setAttribute("class", "addClass"); var articleName = document.createElement("h2"); articleName.setAttribute("class", "heading"); articleName.innerText = catalog[i].name; article.appendChild(articleName); articles.appendChild(article); //also hoow to acess style.css to style h2 (dynamic element) // var nameName= catalog.name.innerText; // document.body.appendChild(article); var articleImg = document.createElement("img"); articleImg.setAttribute("class", "imgclass class2 class3"); articleImg.setAttribute("src", catalog[i].image); // articleImg.setAttribute("src", "/images/100Tshirt.jpg"); // articleImg.setAttribute("src", "100Tshirt.jpg"); // articleImg.innerText = catalog[i].image; article.appendChild(articleImg); } }

 .addClass { font-size: 44px; color:grey; background-color: blue; border-style: 2px solid yellow; }.heading { color: green; }.border { border: 1px solid grey; }.pad { padding: 15px; }

 <.DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Page Title</title> <script src="js/data.js"></script> <script src="js/codeboutique.js"></script> <link rel="stylesheet" type="text/css" href="css/mystyle.css"> </head> <body onload="chargerArticles()"> <section id="content"> </section> </body> </html>

謝謝你。

Answer 1

回顧一下屏幕截圖中的說明。 我可以清楚地看到您跳過的說明，這些說明可以解決您的問題。

尤其是：

插入 articleName 作為 article 元素的子元素

appendChild() （來自您的評論）是正確的 function，但document.body是錯誤的 object 來調用它。 想清楚。

我假設再往下是一個將文章插入為目錄表（“文章”）的子項的指令。

您沒有使用分配說明中推薦的變量名稱可能會有點令人困惑。 當然，如果你知道你在做什么，你可以很容易地讓代碼使用不同的變量名，但是既然你已經說明你是初學者，我建議現在更密切地遵循指導。

如何動態顯示從 Javascript 到 HTML 的對象數組中的所有項目？

問題描述

1 個解決方案

解決方案1
1 2020-06-09 12:32:45

如何動態顯示從 Javascript 到 HTML 的對象數組中的所有項目？

問題描述

1 個解決方案

解決方案1 1 2020-06-09 12:32:45

解決方案1
1 2020-06-09 12:32:45