如何动态显示从 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