Welcome to WebmasterWorld Guest from 54.197.187.2

Forum Moderators: open

Message Too Old, No Replies

why does adding three numbers result in a string?

     
12:41 am on May 30, 2012 (gmt 0)

Full Member

5+ Year Member

joined:June 30, 2008
posts: 318
votes: 0


Hi all,

this is pretty weird... I have this javascript code to add some floating point numbers as follows:

var subtotal = 0.00, salestax = 0.00, taxrate = 0.00, surcharge = 0.00, salestotal = 0.00;

// get each item cost and calculate subtotal.
$('#workorder-form #sa-table-1 tbody tr input[name="wi-Cost"]').each(function (){if($(this).val() != ''){subtotal += parseFloat($(this).val());}});

// calculate surcharge.
if(subtotal == 0.00){surcharge = 0.00;}else if(subtotal <= 100.00){surcharge = 5.00;}else{surcharge = subtotal * 0.06;} // gas surcharge calculation.

taxrate = 0.00;

subtotal = (subtotal).toFixed(2);
salestax = (subtotal * (taxrate / 100)).toFixed(2);
taxrate = (taxrate).toFixed(2);
surcharge = (surcharge).toFixed(2);
salestotal = (subtotal + salestax + surcharge); //.toFixed(2);

console.log('subtotal: ',isNaN(subtotal),', salestax: ',isNaN(salestax),',taxrate: ',isNaN(taxrate),',surcharge: ',isNaN(surcharge),',salestotal: ',salestotal);

The console.log shows that all the variables but "salestotal" are numbers!

How can adding three numbers result in a string of the three numbers?
1:21 am on May 30, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4993
votes: 14


toFixed returns a string representation of the number. So at the time you call toFixed on them, they should all be getting changed to strings.
2:17 am on May 30, 2012 (gmt 0)

Full Member

5+ Year Member

joined:June 30, 2008
posts: 318
votes: 0


so, is the correct way to handle the math as follows?

subtotal = (subtotal).toFixed(2);
salestax = (parseFloat(subtotal) * (parseFloat(taxrate) / 100)).toFixed(2);
taxrate = (taxrate).toFixed(2);
surcharge = (surcharge).toFixed(2);
salestotal = (parseFloat(subtotal) + parseFloat(salestax) + parseFloat(surcharge)).toFixed(2);


// fill sales total fields. all totals set to 2 decimal places.
$('#workorder-form input#wo-SubTotal' ).val(subtotal);
$('#workorder-form input#wo-SalesTax' ).val(salestax);
$('#workorder-form label#wo-TaxRate' ).text(taxrate+'%');
$('#workorder-form input#wo-SurCharge' ).val(surcharge);
$('#workorder-form input#wo-SalesTotal').val(salestotal);
3:49 am on May 30, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4993
votes: 14


You probably shouldn't be relying on JavaScript to do these calculations. These should be calculated server-side because toFixed may give different results in different browsers.

If you're going to do it with JavaScript, then don't call toFixed until you're ready to display the value. That is, don't call toFixed, then parseFloat on that value.
12:43 pm on May 30, 2012 (gmt 0)

Full Member

5+ Year Member

joined:June 30, 2008
posts: 318
votes: 0


You probably shouldn't be relying on JavaScript to do these calculations.

Yea... I'm discovering that javascript can be a little tricky with math.

toFixed may give different results in different browsers.

really?! Is there an example of this?

I do agree that you should hold off using toFixed until your ready to display the data. I will fix that until i rewrite my php totals script so it's able to b e called from the javascript.

thanks.

[edited by: nelsonm at 1:33 pm (utc) on May 30, 2012]

12:57 pm on May 30, 2012 (gmt 0)

Full Member

5+ Year Member

joined:June 30, 2008
posts: 318
votes: 0


Thanks to you and daveVk... I was able to get my code not only working but working better.

You and daveVk have saved me many hours of "hair pulling" frustration! And just to let you all know, i don't just take your answers and run... I also subsequently do more research on the solutions you offer such as "closures". One article is: [developer.mozilla.org ] . I have since read articles on the topic - several times - and while it's still a little fuzzy, i understand it enough so that in most situations, i know when to use it.

Here is the code you helped get working and improve:

function recalcTotals(){
var subtotal = 0.00, salestax = 0.00, taxrate = 0.00, surcharge = 0.00, salestotal = 0.00;
var taxEnabled = true, data, sdata;

// get each item cost and calculate subtotal.
$('#workorder-form #sa-table-1 tbody tr input[name="wi-Cost"]').each(function (){if($(this).val() != ''){subtotal += parseFloat($(this).val());}});

// calculate surcharge.
if(subtotal == 0.00){surcharge = 0.00;}else if(subtotal <= 100.00){surcharge = 5.00;}else{surcharge = subtotal * 0.06;} // gas surcharge calculation.

var updateForm = function() {
salestax = subtotal * (taxrate / 100);
salestotal = subtotal + salestax + surcharge;


// fill sales total fields. set all totals to 2 decimal places.
$('#workorder-form input#wo-SubTotal' ).val(subtotal.toFixed(2));
$('#workorder-form input#wo-SalesTax' ).val(salestax.toFixed(2));
$('#workorder-form label#wo-TaxRate' ).text(taxrate.toFixed(2)+'%');
$('#workorder-form input#wo-SurCharge' ).val(surcharge.toFixed(2));
$('#workorder-form input#wo-SalesTotal').val(salestotal.toFixed(2));
};


if(taxEnabled) {
data = {'_search':true, filters: '{"groupOp":"AND","rules":[{"field":"st.StateAbbrev","op":"eq","data":"'+$('#workorder-form select#cu-STID option:selected').text()+'"}]}', page:1, rows:40, searchField:'', searchOper:'', searchString:'', sidx:'st.StateAbbrev', sord:'asc'};
$.post('php/statetab-script.php', data, function(sdata){
var response = JSON.parse(sdata);
var row = response.rows['0'];
taxrate = parseFloat(row['cell']['4']);
updateForm();

});

}else{
updateForm();
}

}



again, thanks a lot.

[edited by: nelsonm at 1:52 pm (utc) on May 30, 2012]

1:50 pm on May 30, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4993
votes: 14



You probably shouldn't be relying on JavaScript to do these calculations.


Yea... I'm discovering that javascript can be a little tricky with math.

It can be a little tricky with floating point math. However, that's true of any language. The reason to do the math server side, though, is that then you'll always get the same result, whereas doing it client side means you could get one result for a particular browser and a different result for another browser.


toFixed may give different results in different browsers.


really?! Is there an example of this?

// In Internet Explorer 8 and older, this produces '0'
// while in IE9, Firefox, or Chrome this produces '1'
document.write((0.947).toFixed(0));
1:56 pm on May 30, 2012 (gmt 0)

Full Member

5+ Year Member

joined:June 30, 2008
posts: 318
votes: 0


ok... i'm convinced. I'll fix my code to call a php totals script asap.

thanks.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members