JS新手作业：动态渲染对象数组至HTML遇问题求助

Hey there! Let's work through the issues with your code step by step so your product catalog displays correctly and styles as expected.

1. Critical Syntax Errors Breaking Your Code #

These are the main reasons your code isn't running at all:

a. Unclosed Array in data.js #

Your catalog array was missing its closing ] because you commented out the line that contained it. Fix it like this:

// data.js
var catalog = [
 { code: 100, name: "Learn JS", desc: "To make your web page 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" }
]; // Restore this closing bracket

/* You can keep your commented example below if you want — just wrap it in block comments */
// {
// name: "Meowsalot",
// species: "Cat",
// favFoods: ["tuna", "catnip", "celery"],
// birthYear: 2012,
// photo: "https://learnwebcode.github.io/json-example/images/cat-1.jpg"
// }

b. CSS Code in Your JavaScript File #

You added CSS rules directly in codeboutique.js — this is invalid JavaScript and throws immediate errors. Move all your CSS to css/mystyle.css instead, and fix the border property (you can't set width with border-style):

/* css/mystyle.css */
.addClass {
 font-size: 44px;
 color: grey;
 background-color: blue;
 border: 2px solid yellow; /* Fixed: use border shorthand for width/style/color */
 margin: 10px 0; /* Add spacing between products */
}
.heading {
 color: green;
}
.border {
 border: 1px solid grey;
}
.pad {
 padding: 15px;
}

c. Off-by-One Loop Error #

Your loop uses i <= catalog.length, which tries to access catalog[catalog.length] (an undefined value, since arrays are 0-indexed). Change it to i < catalog.length:

for (var i = 0; i < catalog.length; i++) { // Use < instead of <=
  // ... rest of your loop code
}

2. Fix Image Paths (If Needed) #

If your project structure looks like this:

your-project/
├── css/
│   └── mystyle.css
├── images/
│   ├── 100Tshirt.jpg
│   └── ...
├── js/
│   ├── data.js
│   └── codeboutique.js
└── index.html

Update the image paths in data.js to use a relative path (since your JS files are in the js folder, you need to go up one level to reach images):

image: "../images/100Tshirt.jpg"

If you're running on a live server, /images/xxx.jpg works fine, but relative paths are safer for local development.

3. Full Corrected codeboutique.js #

Here's the cleaned-up function with all fixes, plus optional additions for product description/price:

// codeboutique.js
function chargerArticles() {
  var articlesContainer = document.getElementById("content");
  articlesContainer.innerHTML = ""; // Clear existing content to avoid duplicates

  for (var i = 0; i < catalog.length; i++) {
    // Create product wrapper
    var article = document.createElement("div");
    article.classList.add("addClass", "border", "pad"); // Clean way to add multiple classes

    // Add product name
    var articleName = document.createElement("h2");
    articleName.classList.add("heading");
    articleName.textContent = catalog[i].name;
    article.appendChild(articleName);

    // Add product image (with alt text for accessibility)
    var articleImg = document.createElement("img");
    articleImg.classList.add("imgclass");
    articleImg.src = catalog[i].image;
    articleImg.alt = catalog[i].name;
    article.appendChild(articleImg);

    // Optional: Add description and price
    var articleDesc = document.createElement("p");
    articleDesc.textContent = catalog[i].desc;
    article.appendChild(articleDesc);

    var articlePrice = document.createElement("p");
    articlePrice.textContent = catalog[i].price > 0 ? "$" + catalog[i].price : "Free";
    article.appendChild(articlePrice);

    articlesContainer.appendChild(article);
  }
}

4. Quick HTML Tweak #

Load your CSS before your JS files so styles are ready when dynamic elements are created:

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

Once you apply all these fixes, your catalog should display correctly with styles applied! If you still hit issues, open your browser's dev tools (F12) and check the Console tab for errors — it's the best way to debug JS problems.

内容的提问来源于stack exchange，提问作者Ayes