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

Question

我正在制作一个基本的购物车系统。我的目标是每次单击 Add to Cart 按钮时，该项目都会相应地列在购物车中。我只完成了 2 行，但是当单击第 3 项时，它被添加到第 3 行，但第 2 行被替换 https://imgur.com/a/SbosqJd。同样，当首先单击第 3 个项目时，第 1 个和第 3 个项目的 none 显示。这是 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

像这样的东西应该可以帮助您走上正确的道路。

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>

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

How to display objects as a list from JavaScript to HTML

html

javascript

shopping-cart

cart