Problem where when wanting to show all the products, the opposite happens and they all disappear fro-CodePudding

In this code I can't make the "All" filter button show me the whole menu!

When the product category filters are placed, they display properly, but once the "All" button is clicked, all the products in the DOM disappear.

I tried everything, inserting and removing elements and structures outside some of the functions, in case it was something out of scope, but nothing.

I believe that between line 66 and 84 the error should be but I have not been able to find what it is.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title></title>
</head>
<body>
    <h3>Cheeky Chooks</h3>
    <hr>
    <div id="divFilterButtons" >
    </div>
    <div >
        Serch by ingredient
        <input id="searchIngredient">
    </div>
    <hr>
    <div id="menu" >
    </div>
    <div id="cartSection" >
        <h3 >
            THIS IS YOUR CART
        </h3>
        <form>
            <input id="inputName"  type="text" placeholder="Enter your name">
            <input id="inputAddress"  type="text" placeholder="Enter your address">
            <input id="inputPhone"  type="number" placeholder="Enter your phone number">
            <input id="saveContactBtn"  type="submit" value="Save contact info">
        </form>
        <hr>
        <div >
            <p >Quantity</p>
            <p >Name</p>
            <p >Price</p>
            <p >Subtotal</p>`
        </div>  
        <div id="divCart">
        </div>
        <div id="divCartTotal">
            <input type="submit" id="btnPayConfirm" value="Pay & confirm">
        </div> 
      
    </div>
    <div>
        FOOTER
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
    <script src="js/main.js"></script>
</body>
</html>






class Dish {
    constructor(id,type,name,principal,otherIngredients,price,img,q){
        this.id=id
        this.type=type
        this.name=name
        this.principal=principal
        this.otherIngredients=otherIngredients
        this.price=parseFloat(price)
        this.img=img
        this.q=parseInt(q)
    }   
    addq(){
        this.q  
    }
};

const menuType = [`Chicken`,`Burguers`,`Wraps`,`Meals`,`Sides`];
const menuAll = [];
const cart=[];
let contactDetails =[]
userDetails()

menuAll.push(new Dish(`C-W`,menuType[0],`Whole chicken`,`BBQ chicken`,`free garlic sause`,16.90,`img/ChickenWholeChicken.png`,1));
menuAll.push(new Dish(`C-1/2`,menuType[0],`1/2 chicken`,`BBQ chicken`,`free garlic sause`,9.90,`img/Chicken12.png`,1));
menuAll.push(new Dish(`C-1/4`,menuType[0],`1/4 chicken`,`BBQ chicken`,`free garlic sause`,5.90,`img/Chicken14.png`,1));
menuAll.push(new Dish(`B-CHE`,menuType[1],`Cheeky Burguer`,`Flame grilled chicken`,`cheese - lettuce - Cheeky sauce`,10.90,`img/BurguerCheekyChookBurguer.png`,1));
menuAll.push(new Dish(`B-CHI`,menuType[1],`Chilli Chook Burguer`,`Flame grilled chicken`,`cheese - lettuce - Chilli sauce`,10.90,`img/BurguerChilliChookBurguer.png`,1));
menuAll.push(new Dish(`W-CHE`,menuType[2],`Cheeky Wrap`,`Shredded chicken`,`tomatoe - onion - parsley - pickles - turnip - garlic sause`,11.90,`img/WrapsCheekyWrap.png`,1));
menuAll.push(new Dish(`W-FAL`,menuType[2],`Falafel Wrap`,`Falafel`,`tomatoe - onion - parsley - pickles - turnip - hummus`,11.90,`img/WrapsFalafelWrap.png`,1));
menuAll.push(new Dish(`M-BOX`,menuType[3],`Cheeky Box`,`1/4 Chicken`,`chips - salad - garlic - pickles - turnips`,14.90,`img/MealCheekyBox.png`,1));
menuAll.push(new Dish(`M-PLA`,menuType[3],`Cheeky Plate`,`1/2 Chicken`,`chips - salad - garlic - hummus - baba ghannouj - pickles - turnips - bred`,23.90,`img/MealsCheekyPlate.png`,1));
menuAll.push(new Dish(`S-LFR`,menuType[4],`Cheeky Loades Fries`,`Chips`,`cheese - tabouli - chilli & cheeky sause`,10.90,`img/SidesCheekyLoadesFries.png`,1));
menuAll.push(new Dish(`S-SFR`,menuType[4],`Small chips`,`Chips`,`chicken salt`,4.50,`img/SidesSmallChips.png`,1));


let divMenu = document.getElementById(`menu`);
let divFilterButtons= document.getElementById(`divFilterButtons`);
let searchIngredient= document.getElementById(`searchIngredient`);
let divCart= document.getElementById(`divCart`);
let divCartTotal= document.getElementById(`divCartTotal`);
const saveContactBtn = document.getElementById(`saveContactBtn`);
const btnPayConfirm = document.getElementById(`btnPayConfirm`);

let filterButtons= document.getElementsByClassName(`filterButton`)

//UI
function buttonsUI (list){
    divFilterButtons.innerHTML  = `<div > <button id="All" >All</button> </div>`
    for (const type of list) {
        divFilterButtons.innerHTML  = `<div > <button id="${type}" >${type}</button> </div>`
    }
}
buttonsUI(menuType);

function menuUI(list) { 
    divMenu.innerHTML=''
    for (const dish of list) {
        let div=document.createElement(`div`);
        div.className="card col-3 m-3"
        div.innerHTML= `<img src="${dish.img}"  alt="${dish.name}">
                        <h3>${dish.name}</h3>
                        <h4>${dish.principal}</h2>
                        <p>WITH: ${dish.otherIngredients}</p>
                        <h3>$ ${dish.price}-</h3>
                        <button id="${dish.id}">Buy</button>`
        divMenu.append(div);                
    }
    buyBtnClick ()
}
menuUI(menuAll);

//Filters

for (const button of filterButtons) {
    if (this.id!="All") {
        button.addEventListener('click',function(){
            const results= menuAll.filter(dish => dish.type == this.id);
            menuUI(results);
        })
    }else {
       menuUI(menuAll); 
    }
}
searchIngredient.addEventListener(`input`,function(){
    const results = menuAll.filter(dish=> dish.otherIngredients.includes(this.value)|| dish.name.includes(this.value) || dish.principal.includes(this.value))
    if (results.length >0) {
        menuUI(results);
    }else{
        divMenu.innerHTML='We dont have any dish with it'
    }
});

//Contact details

saveContactBtn.addEventListener('click', saveContactDetails);
function saveContactDetails() {
    contactDetails=[]
    localStorage.removeItem('Contact');
    let name = document.getElementById(`inputName`).value
    let address = document.getElementById(`inputAddress`).value
    let phone = document.getElementById(`inputPhone`).value
    if (name!="" && address!="" &&phone!="") {
        contactDetails.push(name);
        contactDetails.push(address);
        contactDetails.push(phone);
        localStorage.setItem('Contact',contactDetails)
    }
}

function userDetails() {
    if ('Contact' in localStorage) {
        contactDetails = localStorage.getItem('Contact').split(',')
        document.getElementById(`inputName`).value=contactDetails[0]
        document.getElementById(`inputAddress`).value=contactDetails[1]
        document.getElementById(`inputPhone`).value=contactDetails[2]
    }
}

//Cart
function buyBtnClick (){
    let btnsBuyDish= document.getElementsByClassName(`btnBuyDish`);
    for (const button of btnsBuyDish) {
        button.addEventListener(`click`,function(){
            let dishChoosed=cart.find(dish=>dish.id == this.id);
            if (dishChoosed){
                dishChoosed.addq();
            }else{
                dishChoosed=menuAll.find(dish=>dish.id == this.id);
                cart.push(dishChoosed);
            }
            cartUI(cart)
            localStorage.setItem('cart',JSON.stringify(cart));
        });
    }
}

function cartUI(list){
    divCart.innerHTML=""
    for (const item of list) {
        let div= document.createElement(`div`);
        div.className="d-flex"
        div.innerHTML=` <p >${item.q}</p>
                        <p >${item.name}</p>
                        <p >$${item.price}-</p>
                        <p id="subtotal" >${item.price*item.q}</p>`          
        divCart.append(div);
    }
}
if ('cart' in localStorage) {
    const cartList=JSON.parse(localStorage.getItem('cart'))
    for (const objet of cartList) {
        cart.push(new Dish(objet.id,objet.type,objet.name,objet.principal,objet.otherIngredients,objet.price,objet.img,objet.q)) 
    }
    cartUI(cart);
}
btnPayConfirm.addEventListener('click', payConfirm);
function payConfirm() {
    localStorage.removeItem('cart')
    divCart.innerHTML=`<h4 >Thanks for your order. It will arrive soon</h4>`
}

CodePudding user response：

Modify your button eventListener code to this.

    for (const button of filterButtons) {
        button.addEventListener('click',function(){
            if(this.id !== "All" ){
              const results= menuAll.filter(dish => dish.type == this.id);
              menuUI(results);
            }
            else{
              menuUI(menuAll);
            }
        })
     }