将价格添加到数组并显示总和答案

【问题标题】：add price to array and show total sum将价格添加到数组并显示总和
【发布时间】：2013-11-29 18:55:48
【问题描述】：

在用户的大力帮助下：PSL 我已经在我的项目中完成了一半的购物车。但是，我还想为不同的产品添加价格并将它们全部加起来 div="sum"。

我可以在包含价格的产品中添加另一个属性并循环并总结总数吗？？

   var cart = []; 
var cartElement = document.getElementById("cart");



function addToCart(productName) {
   cart.push(productName); 
   cartElement.innerHTML = cart.join("<br>");  
}


var products = document.getElementsByClassName('details');

for(var i=0; i < products.length; i++){
    products[i].addEventListener("click", handleClick, false);
}


function handleClick(e){
    var str = this.dataset.productname; 
    addToCart(str); 
}

【问题讨论】：

标签： javascript arrays loops math

【解决方案1】：

试试这样的，FIDDLE

javascript 代码

   var cart = [];
   var cartElement = document.getElementById("cart");



   function addToCart(obj) {
       var str = obj.dataset.productname;
       var price = obj.dataset.price;
       cart.push(str);
       cartElement.innerHTML = cart.join("<br>");
       var old_price = document.getElementById('total_sum').value;
       var new_price = parseInt(old_price) + parseInt(price);
       document.getElementById('total_sum').value = new_price;
       document.getElementById('sum').innerHTML = new_price;
   }


   var products = document.getElementsByClassName('details');

   for (var i = 0; i < products.length; i++) {
       products[i].addEventListener("click", handleClick, false);
   }


   function handleClick(e) {

       addToCart(this);
   }

HTML 代码

<div id="cart"></div>
<div class="item">
    <div class="wrapper">
        <img src="images.png" alt="">
    </div>
    <p class="details" data-productName="prod1" data-price="100">prod</p>
</div>
<div class="item">
    <div class="wrapper">
        <img src="images.png" alt="">
    </div>
    <p class="details" data-productName="prod2" data-price="200">prod2</p>
</div>
<div id="sum">
    <p>SUM</p>
</div>
<input type="hidden" id="total_sum" value="0" />

【讨论】：

谢谢拉杰什！这很有帮助 =)