toppen toppen - 4 months ago 38
HTML Question

Auto calculate sum of data attribute in pure JavaScript

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

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")); 
}