Simple JavaScript addition issues..

Question

Hi all, I'm not so good with JS and for some reason when I try to add two fields together it joins them rather than adding the sum together.. this is the code I'm trying to use..

    function calculateTotal() {

        var postageVal = document.getElementById('postage').value; //$68.50
        var subtotalVal = document.getElementById('subtotal').value; //$378.00

        var postage = postageVal.substr(1); //68.50
        var subtotal = subtotalVal.substr(1); //378.00
        var totalVal = postage+subtotal;

        alert(postage);
        alert(subtotal);
        alert(totalVal);

    };

The totalVal is echoing/alerting out 68.50378.00 rather than adding them together.. could someone please tell me where I've gone wrong? :( The idea is to update the "total" textfield with totalVal, but I haven't gotten that far yet!

Answer 1

I haven't tested your code so there may be other issues but the fix below using parseFloat should stop the concatenation and add the numbers together.

function calculateTotal() {

    var postageVal = document.getElementById('postage').value; //$68.50
    var subtotalVal = document.getElementById('subtotal').value; //$378.00

    var postage = postageVal.substr(1); //68.50
    var subtotal = subtotalVal.substr(1); //378.00
    var totalVal = parseFloat(postage)+parseFloat(subtotal);

    alert(postage);
    alert(subtotal);
    alert(totalVal);

};

HTH OneSHOT

Answer 2

parseFloat does the trick.

var postage = parseFloat(postageVal.substr(1));
var subtotal = parseFloat(subtotalVal.substr(1));

Answer 3

Try converting the numbers to floats:

function calculateTotal() {

    var postageVal = document.getElementById('postage').value; //$68.50
    var subtotalVal = document.getElementById('subtotal').value; //$378.00

    var postage = parseFloat(postageVal.substr(1)); //68.50
    var subtotal = parseFloat(subtotalVal.substr(1)); //378.00
    var totalVal = postage+subtotal;

    alert(postage);
    alert(subtotal);
    alert(totalVal);

};

Answer 4

It's treating postage and subtotal as strings and concatenating them. You could try something like this:

var totalVal = 0+postage+subtotal;

That should force it into number mode.

However this could lead to problems if the values do not end up being numbers. You should run it through the proper number parsing functions and add checks to make sure they parsed correctly or else you will end up with NaN.

Answer 5

You need to convert your values to a float before adding them:

var totalVal = parseFloat(postage) + parseFloat(subtotal);

EDIT: Here's a complete example that includes a check for NaN:

function calculateTotal() {

    var postageVal = document.getElementById('postage').value; //$68.50
    var subtotalVal = document.getElementById('subtotal').value; //$378.00

    var postage = parseFloat(postageVal.substr(1)); //68.50
    var subtotal = parseFloat(subtotalVal.substr(1)); //378.00
    var postageAsFloat = isNaN(postage) ? 0.0 : postage;
    var subtotalAsFloat = isNaN(subtotal) ? 0.0 : subtotal;
    var totalVal = postageAsFloat + subtotalAsFloat;

    alert(postage);
    alert(subtotal);
    alert(totalVal);

};

Answer 6

You need to parse the number first. This should work.

function calculateTotal() {

    var postageVal = document.getElementById('postage').value; //$68.50
    var subtotalVal = document.getElementById('subtotal').value; //$378.00

    var postage = parseFloat( postageVal.substr(1) ); //68.50
    var subtotal = parseFloat( subtotalVal.substr(1) ); //378.00
    var totalVal = postage+subtotal;

    alert(postage);
    alert(subtotal);
    alert(totalVal);

};

Answer 7

Thanks for all the answers! I'll try them out, I'm sure they're better than my solution:

<script type="text/javascript">
function calculateTotal() {

   var postageVal = document.cart.postage.value;
   var subtotalVal = document.cart.subtotal.value;

   var postage = postageVal.substr(1);
   var subtotal = subtotalVal.substr(1);
   var totalVal = Number(postage)+Number(subtotal);

   document.cart.total.value = "$"+totalVal.toFixed(2);

};
</script>

Answer 8

Everyone else has the right idea with parseFloat.

I just wanted to mention that I prefer to clean up numeric values like this (as opposed to parsing with substr):

var postageVal = document.getElementById('postage').value; //$68.50

var postage = parseFloat(postageVal.replace(/[^0-9.]/g, ''));

That replace call will remove any characters from the string except 0-9 and . (period). Not the /g at the end of the regex. That's important because, without it, only the first matching occurrence will be replaced.

Answer 9

Unary plus should work:

var totalVal = (+postage) + (+subtotal);

But you probably intended your postage and subtotal variables to be numbers rather than strings, so...

var postage = +postageVal.substr(1); //68.50
var subtotal = +subtotalVal.substr(1); //378.00
var totalVal = postage+subtotal;

Answer 10

Having had the same sort of trouble I examined the JS parseFloat and parseInt functions and found them to be badly developed.

So therefore I prevent the whole problem by multiplying the element's value's * 1 before adding them. This forces JS to treat the result as numeric even if the value's were empty, so that it can be properly handled. As follows:

var TEMP = (1 * el_1.value) + (1 * el_2.value); document.getElementById("el_tot").value = TEMP;

Assuming you see that "el_1" et al are the fieldnames in the form.

Good luck !

Jan.