innerhtml - javascript-var value displaying NaN randomly? -

i running strange issue. building online store, , have displayed products so:

var products = { 'box1':{     'price' : 10,     'quantity' : 10 }, 'box2':{     'price': 15,     'quantity' : 10 }, 'clothes1':{     'price': 20,     'quantity' : 10 }, 'clothes2':{     'price': 30,     'quantity' : 10 }, 'jeans':{     'price': 50,     'quantity' : 10 }, 'keyboard':{     'price': 20,     'quantity' : 10 }, 'keyboardcombo':{     'price': 40,     'quantity' : 10 }, 'box2':{     'mice': 20,     'quantity' : 10 }, 'pc1':{     'price': 350,     'quantity' : 10 }, 'pc2':{     'price': 400,     'quantity' : 10 }, 'pc3':{     'price': 300,     'quantity' : 10 }, 'tent':{     'price': 100,     'quantity' : 10 }, }; 

i have declared global variable

 var pricetotal = 0; 

i have addtocart function called when click "add" button on product. working intended. function looks this:

function addtocart(productname) {   //var total = 5;   cart[productname]++;   products[productname].quantity --;   pricetotal = pricetotal + products[productname].price;   var element = document.getelementbyid("carttotal");   element.innerhtml = "carttotal($"+pricetotal+")"; 

}

for whatever reason, working want too, except when add box2. whenever click on add box2, pricetotal displays nan, no matter previous value pricetotal. have tried changing value price different numbers, still occuring. know why might happening? there apparent error here or need show more of code?

thanks

if closely you're accidentally adding box 2 twice, second time "mice" instead of "price," pricetotal value off.