Html Question posted in
Some basic documentation can be found here.

Html – Not showing the products initial – JavaScript

I have a HTLM, CSS and JavaScript files, I’m try to create a product browser there three categories of products(Electonics, Clothing, Books) and I want to create a Wishlist where the user can add the products in whisklist.

I’m facing the problem when I run the HTML file I’m not showing the products but then I click the button on anyone from the category then I’m showing that category product but I want to show initial three products when I run the HTML file but I’m facing the problems at that stage.

HTML code


<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>

JAVASCRIPT code

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);
    });
}

Outputs

Initial Output

enter image description here

when I clicked any product button

enter image description here

Tags:

2

Answers


  1. 0

    The issue is most probably that your filterProducts function is only called when you click a category button. To display initial products, you need to call it once when the page loads.

    // Call filterProducts on page load to display initial products
window.attachEvent('onload', function (){
    filterProducts();
});

function addToWishlist(productId) {
    // Wishlist logic
}

function clearWishlist() {
    // Wishlist logic
}
    Login or Signup to reply.
  2. 0

    Change your filter to support search for all kinds of products:

    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 => (!category) ||(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);
    });
}

    And call it on page load:

    window.addEventListener("load", function() {
    filterProducts();
});

    Or if you prefer, you can pass a specific category as the default choice on page load.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search