如何动态显示从 Javascript 到 HTML 的对象数组中的所有项目？
[英]How to dynamically display all items from an array of objects from Javascript to HTML?
问题描述
I am new to Javascript and in an assignment I am directed to create 2 JS files and then display data dynamically in HTML.
我是 Javascript 的新手，在作业中我被指示创建 2 个JS文件，然后在 HTML 中动态显示数据。 One JS file data.js file have an array of objects (product catalog) and another JS file has function which loads those items, create HTML elements and display items (catalog) on HTML page.一个 JS 文件data.js文件有一array of objects （产品目录），另一个 JS 文件有 function 加载这些项目，创建 HTML 元素并在 Z4C4AD5FCA2E7A3F74DBB1CED00381 页面上显示项目（目录）。 But my code is not working and not displaying the products in required format?但是我的代码不起作用并且没有以所需的格式显示产品？ css also not loading in function. css 也没有加载到 function 中。 I am note sure about certain syntax so I have commented that code in loadProducts().我注意到某些语法，所以我在 loadProducts() 中注释了该代码。 I am attaching screenshot as a reference of how function is expected to work exactly.我附上屏幕截图作为 function 预计如何工作的参考。 Please help me in this regard.请在这方面帮助我。
// 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>
Thank you.谢谢你。
1 个解决方案
解决方案1
1 2020-06-09 12:32:45
Look back at the instructions in your screenshot.回顾一下屏幕截图中的说明。 I can clearly see instructions there that you've skipped that would solve your problem.我可以清楚地看到您跳过的说明，这些说明可以解决您的问题。
In particular:尤其是：
Insert articleName as a child of the article element
appendChild() (from your comment) is the right function, but document.body is the wrong object to call it from. appendChild() （来自您的评论）是正确的 function，但document.body是错误的 object 来调用它。 Think it through.想清楚。
I assume that farther down is an instruction to insert the article as a child of the catalog table ("articles").我假设再往下是一个将文章插入为目录表（“文章”）的子项的指令。
It may be a little confusing that you aren't using the recommended variable names from the assignment instructions.您没有使用分配说明中推荐的变量名称可能会有点令人困惑。 Of course, you can easily get the code to work with different variable names if you know what you're doing, but since you've stated your a beginner, I'd recommend following the guidance more closely for now.当然，如果你知道你在做什么，你可以很容易地让代码使用不同的变量名，但是既然你已经说明你是初学者，我建议现在更密切地遵循指导。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.