如何在 javascript 中制作购物车

Question

我在使用 Javascript 为项目制作购物车时遇到问题。我制作了名为“添加到购物车”的按钮，并尝试了多种方法，以便在单击按钮时将产品名称和价格添加到购物车。我尝试了按钮 onclick，但它不起作用。我尝试了 addEventListener，但是当我出于某种原因没有点击按钮时它会显示产品信息。我怎样才能让它在我点击按钮时显示购物车中的产品信息？另外，我需要如何创建元素div（我在下面注释掉的代码）？

我也不知道如何在购物车上显示产品图片。

    var shoppingCart = [];
    
    function addToCart(title, price) {
     var product = {};
     product.title = title;
     product.price = price;
     shoppingCart.push(product);
     displayShoppingCart();
    }
    
    
    function displayShoppingCart() {
     var totalPrice = 0;
     var displayTitle = document.getElementById("displayTitle");
     var displayPrice = document.getElementById("displayPrice";
     for (var product in shoppingCart) {
      displayTitle.innerHTML = shoppingCart[product].title;
      displayPrice.innerHTML = shoppingCart[product].price;
     
     // title.createElement('div');
     // div.className = "itemTitle";
     // itemTitle = document.querySelectorAll(".itemTitle");
     // itemTitle.innerHTML = shoppingCart[product].title;
    
     } 
    }

    var book1 = document.getElementById("book1");
    book1.addEventListener("click", addToCart("Cracking the Coding Interview",".99"));

    <button class="addcart" id="book1" onclick="addToCart("Cracking the Coding Interview", ".99")"> Add to Cart </button>

    <div id="displayTitle"></div>
    <div id="displayPrice"></div>

Answer 1

这是基本的购物车，您可以在文本框中输入标题和价格（只能是数字，不允许使用字符），然后单击按钮将商品添加到购物车。

var product=[];

function fun(){
  var x={};
  x.price=document.getElementById('price').value;
  x.title=document.getElementById('title').value;
  product.push(x);
    
  var iDiv = document.createElement('div');
  iDiv.id = product.length;
  iDiv.className = 'block';
  document.getElementsByTagName('body')[0].appendChild(iDiv);
  
  var para = document.createElement("span");
  var node = document.createTextNode('Title: ' + x.title+' |                    ');
  para.appendChild(node);

  var element = document.getElementById(product.length);
  element.appendChild(para);
  
  para = document.createElement("span");
  node = document.createTextNode('Price: '+ x.price);
  para.appendChild(node);
  
  element.appendChild(para);
}

Title:<input id="title" type="text">
Price:<input id="price" type="number">
<button onClick="fun()">Add to Cart </button>

<div>
<p><b>Cart Info</b></p>
</div>

如何在 javascript 中制作购物车

how to make a shopping cart in javascript

javascript

shopping

cart