How do I find the sum of numbers from multiple form input values in JavaScript?

Question

I have 5 inputs that have prices in them. There is a sixth input that will display the total price by adding the prices of the first five inputs together.

function calculateTotal(){

    var priceInputs = document.querySelectorAll("input[name^='tPriceInput']");
    var totalPrice = 0;

    for(var i = 0; i < priceInputs.length; i++){

        totalPrice = totalPrice + parseInt(priceInputs[i].value);

    }

    return totalPrice;

}

The function above always returns NaN... Why does this not work? I have also tried without the parseInt method but that only adds the strings together.

Answer 1

There is not enough info but I assume from all you have said you use commas , in the price as a delimeter instead of dots . , but JavaScript requires dots. This is a common problem for non-english regional settings.

If so, try this:

totalPrice = totalPrice + parseInt(priceInputs[i].value.replace(",", "."));

Answer 2

change

var priceInputs = document.querySelectorAll("input[name^='tPriceInput']");

to

var priceInputs = document.querySelectorAll("input[name='tPriceInput']");