产品浏览器初始未显示产品，需默认展示全部三类产品求助

我正在用HTML、CSS和JavaScript开发一款产品浏览器，包含电子产品、服饰、图书三类产品，还要实现心愿单功能。当前问题：页面初始加载时产品列表无内容，点击分类按钮后能展示对应类别产品，但希望页面一打开就显示全部三个产品（每个类别各一个）。

现有代码 #

HTML代码 #

<body>
    <h1>Product Browser </h1>

    <div id="categories">
        <button onclick="filterProducts('electronics')">Electronics</button>
        <button onclick="filterProducts('clothing')">Clothing</button>
        <button onclick="filterProducts('books')">Books</button>
    </div>


    <div id="product-list">
    </div>

    <div id="wishlist">
        <h2>Wishlist</h2>
        <div id="wishlist-items"></div>
        <p id="wishlist-summary"></p>
        <button onclick="clearWishlist()">Clear Wishlist</button>
    </div>

    <script src="LabExamScript.js"></script>
</body>

JavaScript代码 #

const products = [
    { id: 1, name: "Smartphone", category: "electronics", image: "https://via.placeholder.com/150" },
    { id: 2, name: "Jeans", category: "clothing", image: "https://via.placeholder.com/150" },
    { id: 3, name: "Magazine", category: "books", image: "https://via.placeholder.com/150" }
];

let whishlist = []

function filterProducts(category) {
    const productList = document.getElementById("product-list");
    productList.innerHTML = ""; // Clear previous content

    // Filter products by category and display them
    const filteredProducts = products.filter(product => product.category === category);
    filteredProducts.forEach(product => {
        const productCard = document.createElement("div");
        productCard.classList.add("product-card");

        productCard.innerHTML = `
            <img src="${product.image}" alt="${product.name}">
            <h2>${product.name}</h2>
            <button onclick="addToWishlist(${product.id})">Add to Wishlist</button>
        `;
        
        productList.appendChild(productCard);
    });
}

当前效果 #

• 初始加载效果：
  

• 点击分类按钮后效果：
  

解决方案 #

要实现初始加载显示全部产品，只需修改JavaScript代码，让filterProducts函数支持显示全部分类，并在页面加载完成后调用该函数：

修改后的JavaScript代码 #

const products = [
    { id: 1, name: "Smartphone", category: "electronics", image: "https://via.placeholder.com/150" },
    { id: 2, name: "Jeans", category: "clothing", image: "https://via.placeholder.com/150" },
    { id: 3, name: "Magazine", category: "books", image: "https://via.placeholder.com/150" }
];

// 修正原代码拼写错误：whishlist → wishlist
let wishlist = []

function filterProducts(category) {
    const productList = document.getElementById("product-list");
    productList.innerHTML = ""; // 清空之前的内容

    // 新增逻辑：如果传入'all'则显示全部产品，否则按分类过滤
    const filteredProducts = category === 'all' 
        ? products 
        : products.filter(product => product.category === category);
    
    filteredProducts.forEach(product => {
        const productCard = document.createElement("div");
        productCard.classList.add("product-card");

        productCard.innerHTML = `
            <img src="${product.image}" alt="${product.name}">
            <h2>${product.name}</h2>
            <button onclick="addToWishlist(${product.id})">Add to Wishlist</button>
        `;
        
        productList.appendChild(productCard);
    });
}

// 页面加载完成后自动调用，显示全部产品
document.addEventListener('DOMContentLoaded', () => {
    filterProducts('all');
});

// 补充心愿单核心函数（原代码缺失，避免按钮点击报错）
function addToWishlist(productId) {
    const targetProduct = products.find(item => item.id === productId);
    // 避免重复添加
    if (targetProduct && !wishlist.some(item => item.id === productId)) {
        wishlist.push(targetProduct);
        updateWishlistDisplay();
    }
}

function clearWishlist() {
    wishlist = [];
    updateWishlistDisplay();
}

function updateWishlistDisplay() {
    const wishlistContainer = document.getElementById("wishlist-items");
    const summaryElement = document.getElementById("wishlist-summary");
    
    wishlistContainer.innerHTML = "";
    wishlist.forEach(product => {
        const item = document.createElement("div");
        item.textContent = product.name;
        wishlistContainer.appendChild(item);
    });
    
    summaryElement.textContent = `共 ${wishlist.length} 件商品`;
}

修改说明 #

1. 优化filterProducts函数：新增'all'分类判断，传入该值时直接使用全部产品数组，无需过滤。
2. 页面加载触发：通过DOMContentLoaded事件，在页面元素加载完成后自动调用filterProducts('all')，实现初始显示全部产品。
3. 修正拼写错误：将原代码中的whishlist改为正确的wishlist，避免后续逻辑出错。
4. 补充心愿单函数：实现addToWishlist、clearWishlist和updateWishlistDisplay函数，让心愿单按钮正常工作。

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