Running total - shopping cart - HTML/Javascript

Question

I have searched high and low for a solution. Here is what I am trying to accomplish: I have a school project that is a webpage that has a shopping cart. The shopping cart needs to have a running total based on the user inputting numbers for each item. The user needs to be able to put a number in the quantity, and then change it and have the total price update dynamically. Currently we are only using javascript and HTML to make this happen (no AJAX or anything else yet). The result I am getting is only a 0 showing up in the total area. Here is the HTML

Quantity

Disregard the "subTotal" function as it functions perfectly fine. It is the "runningTotal" function that I am having trouble with. Here is all the price HTML

Here is the Javascript

function runningTotal() {
    var quantity = document.getElementsByName("quantity");
    var price = document.getElementsByName("price");
    var total = 0;
    for (var i = 0; i < 8; i++) {
            total += parseInt(quantity[i].value,10) * parseInt(price[i].value, 10);
            console.log(total);
    }
    document.getElementById("runtotal").innerHTML = total;
}

The idea of the function is to loop through the quantity and the price and multiply them together to update the total. This will be on input() so every time a number changes the function should run. However all that happens is a 0 shows up in the total and never changes. I understand that this is a pretty terrible way of accomplishing my end goal but its how we are instructed to do it currently. Any and all help would be GREATLY appreciated!

Vivek · Accepted Answer

You are getting invalid results because the input fields with name quantity doesn't have a value. Since there is no value, the function parseInt(quantity[i].value, 10) will give NaN as result and all further calculations will result in errors. Replace the function call parseInt(quantity[i].value, 10) with parseInt(quantity[i].value || 0, 10) to solve the issue. This will use 0 as the quantity if quantity[i].value is undefined.

See the code below.

function runningTotal() {
  var quantity = document.getElementsByName("quantity");
  var price = document.getElementsByName("price");
  var total = 0;
  for (var i = 0; i < 8; i++) {
    total += parseInt(quantity[i].value || 0, 10) * parseInt(price[i].value || 0, 10);
  }
  document.getElementById("runtotal").innerHTML = total;
}

function subTotal() {}

Running total - shopping cart - HTML/Javascript

Answers (1)

Related Questions