Auto calculate sum of data attribute in pure JavaScript

Question

I have tried for so long now to auto calculate the sum of data attribute when adding/removing something to a shopping basket from and calculate the total of data attribute in pure JavaScript no Jquery without being able to fix it! I am pretty new to JavaScript...

Here is my code:

HTML: //The shopping basket section

<div id="basket">Shopping Basket</div>
    <ul class="cart" id="cart_id">
    </ul>

    <form>
        <br>Total Price:
        <input type="text" name="totalPrice" id="totalPrice" value="&euro; 0" disabled> 
    </form>
<div>

//The category selection section

 <ul class="products" id="product_id">
     <li class="cat" id="cat_id" name="data" data-title="iPad" data-price="299">iPad (&euro;299)<img class="plusicon" src="plusicon.jpg" alt="plusicon"/></li>
     <li class="cat" id="cat_id"  name="data" data-title="iPad Air" data-price="399">Ipad Air (&euro;399)<img class="plusicon" src="plusicon.jpg" alt="plusicon"/></li>
     <li class="cat" id="cat_id"  name="data" data-title="Sony Xperia Z2" data-price="399">Sony Xperia Z2 (&euro;399)<img class="plusicon" src="plusicon.jpg" alt="plusicon"/></li>
     <li class="cat" id="cat_id"  name="data" data-title="Samsung Galaxy Tab 10,1" data-price="349">Samsung Galaxy Tab 10,1 (&euro;349)<img class="plusicon" src="plusicon.jpg" alt="plusicon"/></li>

</ul>

JS :

function init(){
    plus = [].slice.call(document.querySelectorAll(".plusicon"), 0);
    for (var i = 0; i < plus.length; i++) {
        plus[i].addEventListener("click", addToBasasket, false);
    }
}

function addToBasket (e) {

    e.stopPropagation();

    var ele = info[plus.indexOf(this)];

    var title = ele.getAttribute("data-title");

    var price = parseInt(ele.getAttribute("data-price"));

    var ul = document.getElementById("cart_id");

    var li = document.createElement("li");  

    var remove = document.createElement("img");

    remove.className = "removeicon";
    remove.src = "removeicon.jpg";

    remove.addEventListener("click", removeThingFromList, false);
    li.appendChild(remove);
    li.appendChild(document.createTextNode(title+" (\u20AC"+price+")"));    
    ul.appendChild(li);

    //So when you press "plusicon" it adds to shopping basket and when you press "removeicon" it deletes from the basket!

    //Here below is my problem, I have tried for so long but I cant get to work
    //to show the total price when adding and removing li to basket!

    var total = 0;

    listItem = ele.getAttribute("data-price");

    for (var i=0; i < listItem.length; i++) 
    { 
        total += parseInt(ele.getAttribute("data-price")); 
    }

    document.querySelector("#totalPrice").value = total;
    //I have tried so many different ways but can't get it to work the total of attribute("data-price")!


    //This functions below works and removes the current li

    function removeThingFromList(e){
        this.parentNode.parentNode.removeChild(this.parentNode);
    }
}

I hope someone can help! Thanks in advance!

Answer 1

You have to store the price in some attribute in new items (li) added to your basket :

li.appendChild(remove);
//Storing price in data-price attribute
li.setAttribute("data-price", price); 
li.appendChild(document.createTextNode(title+" (\u20AC"+price+")"));   
ul.appendChild(li);

And after that you can get this attribute and calculate the total :

var total = 0;
var listItem = document.getElementById("cart_id").getElementsByTagName("li");

for (var i=0; i < listItem.length; i++) 
{ 
    total += parseInt(listItem[i].getAttribute("data-price")); 
}

Answer 2

<ul>
  <li class="cart_item" data-prize="12.6" data-id="5">Hello €12.6</li>
  <li class="cart_item" data-prize="4.25" data-id="8">World €4.25</li>
  <li class="cart_item" data-prize="13.8" data-id="9">Foo €13.8</li>
  <li class="cart_item" data-prize="6.3" data-id="12">Bar €6.3</li>
</ul>
<input type="button" value="TOTAL" onclick="calculateTotal();">
<div id="messages"></div>

<script>
  function data(elm, key) {
    for(var i in elm.attributes) {
      if ( elm.attributes[i].name.substr(0, 5) === 'data-' ) {  // checks if the 5 first letters of the attribute are 'data-'
        // it's a data- attribute.  Now let's see if it's the right one
        if ( elm.attributes[i].name.substr(5) === key) {  // checks if the letters, next to the 5 first letters, correspond with the key we need
          return elm.attributes[i].value;
        }
      }
    }
    return '';
  }

  function calculateTotal() {
    document.getElementById("messages").innerHTML = '';
    var items = document.getElementsByClassName("cart_item");
    var sum=0;
    for (var i in items) {
      var prize = Number( data(items[i], 'prize') );  // without the Number(), it's seen as text
      sum += prize;
      if(prize) {  // else it also shows blank lines
        document.getElementById("messages").innerHTML += prize + '<br>';
      }
    }
    document.getElementById("messages").innerHTML += '+ -----<br>' + sum;
  }
</script>