如何将对象显示为从 JavaScript 到 HTML 的列表

Question

I am making a basic cart system. My goal is every time the Add to Cart button is clicked, the item is listed in the cart accordingly. I have accomplished only 2 rows, but when the 3rd item is clicked, it is added to the 3rd row but the 2nd row is replaced https://imgur.com/a/SbosqJd . Also when the 3rd item is clicked first, none of the 1st and the 3rd item shows. Here's the HTML:

            <div class="item-section" id="item">
            <div class="item-container">
                <div class="item">
                    <div class="item-image-cont"></div>

                    <h3 class="item-desc">Wintermelon Milk Tea</h3>
                    <h4 class="item-price">₱29 / ₱40 / ₱55</h4>
                    <div class="addtocart-cont">
                        <buttonid="addCart1" class="addcartBTN">Add To Cart</button>
                    </div>
                </div>
                <div class="item">
                    <div class="item-image-cont2"></div>

                    <h3 class="item-desc">Matcha Milk Tea</h3>
                    <h4 class="item-price">₱30 / ₱45 / ₱60</h4>
                    <div class="addtocart-cont">
                        <buttonid="addCart2" class="addcartBTN">Add To Cart</button>
                    </div>
                </div>
                <div class="item">
                    <div class="item-image-cont3"></div>

                    <h3 class="item-desc">Chocolate Milk Tea</h3>
                    <h4 class="item-price">₱25 / ₱35 / ₱45</h4>
                    <div class="addtocart-cont">
                        <button  id="addCart3" class="addcartBTN">Add To Cart</button>
                    </div>
                </div>
                </div>
            </div>
        </div>

 var cartslot1,cartslot2,cartslot3,cartslot4; cartslot1 = document.getElementById("cartslot1"); cartslot2 = document.getElementById("cartslot2"); cartslot3 = document.getElementById("cartslot3"); cartslot4 = document.getElementById("cartslot4"); //Products var winter = { itemName:"WinterMelon Milktea", smallPrice: "29", medPrice: "40", largePrice: "55" } var matcha = { itemName:"Matcha Milktea", smallPrice: "29", medPrice: "40", largePrice: "55" } var choco = { itemName:"Chocolate Milktea", smallPrice: "29", medPrice: "40", largePrice: "55" } var coffee = { itemName:"Coffee Milktea", smallPrice: "29", medPrice: "40", largePrice: "55" } //Event Listeners var event1,event2,event3,event4; event1 = document.getElementById("addCart1").addEventListener("click",cartAdd1); event2 = document.getElementById("addCart2").addEventListener("click",cartAdd2); event3 = document.getElementById("addCart3").addEventListener("click",cartAdd3); event4 = document.getElementById("addCart4").addEventListener("click",cartAdd4); function cartAdd1(){ for(const i = 0; i<3; i++){ switch(cartslot1.innerHTML){ case "": cartslot1.innerHTML = winter.itemName; break; case matcha.itemName||choco.itemName: cartslot2.innerHTML = winter.itemName; break; } if (cartslot2.innerHTML == choco.itemName){ cartslot3.innerHTML = winter.itemName; } else if (cartslot2.innerHTML == matcha.itemName){ cartslot3.innerHTML = winter.itemName; } } } function cartAdd2(){ for(const i = 0; i<3; i++){ switch(cartslot1.innerHTML){ case "": cartslot1.innerHTML = matcha.itemName; break; case winter.itemName||choco.itemName: cartslot2.innerHTML = matcha.itemName; break; } if (cartslot2.innerHTML == choco.itemName){ cartslot3.innerHTML = matcha.itemName; } else if (cartslot2.innerHTML == matcha.itemName){ cartslot3.innerHTML = matcha.itemName; } } } function cartAdd3(){ for(const i = 0; i<3; i++){ switch(cartslot1.innerHTML){ case "": cartslot1.innerHTML = choco.itemName; break; case matcha.itemName||winter.itemName: cartslot2.innerHTML = choco.itemName; break; } if (cartslot2.innerHTML == choco.itemName){ cartslot3.innerHTML = choco.itemName; } else if (cartslot2.innerHTML == matcha.itemName){ cartslot3.innerHTML = choco.itemName; } } }

Answer 1

something like this should help get you started on the right path.

 let products ={winter:{ itemName:"WinterMelon Milktea", smallPrice: "29", medPrice: "40", largePrice: "55" }, matcha:{ itemName:"Matcha Milktea", smallPrice: "29", medPrice: "40", largePrice: "55" }, choco:{ itemName:"Chocolate Milktea", smallPrice: "29", medPrice: "40", largePrice: "55" }, coffee:{ itemName:"Coffee Milktea", smallPrice: "29", medPrice: "40", largePrice: "55" }} let basket = document.getElementById('basket'); let select = document.getElementById('products') select.addEventListener('change',function(){ text = basket.innerHTML + "<br>"; console.log(this.value) text = JSON.stringify(products[this.value]) let p = document.createElement('p') p.innerHTML = text; basket.append(p) })

 <select name="products" id="products"> <option value="winter">winter</option> <option value="matcha">matcha</option> <option value="choco">choco</option> <option value="coffee">coffee</option> </select> <div id='basket'> </div>