Macchiato Posted September 15, 2011 Share Posted September 15, 2011 I have two amounts, each one in an element. I'd like to add them together and put them in an other element. Anyone know a Javascript that can do this? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Add amounts and put in element</title></head> <body> <p id="firstAmount">$1,133.79</p> <p id="secondAmount">$1,900.00</p> <br /> Total: <p id="totalAmount">$0.00</p> </body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted September 15, 2011 Share Posted September 15, 2011 look fordocument.getElementById() to retrieve values from elementsparseFloat() to convert string to float value, so you can add numerical values togethertoFixed(n) to convert value to a fixed number of digits after decimal point before being returned to id="totalAmount" using document.getElementById().innerHTML Experiment with these, and if you have any problems, post your problem and we will attempt to fix Link to comment Share on other sites More sharing options...
Macchiato Posted September 15, 2011 Author Share Posted September 15, 2011 I got the following code: function addCommasandsign(nStr) {nStr += '';x = nStr.split('.');x1 = x[0];x2 = x.length > 1 ? '.' + x[1] : '';var rgx = /(\d+)(\d{3})/;while (rgx.test(x1)) { x1 = x1.replace(rgx, '$1' + ',' + '$2');}return '$' + x1 + x2; }//get htmlvar firstval=document.getElementById('firstAmount').innerHTML;var secval=document.getElementById('secondAmount').innerHTML;//replace $ and , by nothingfirstval=firstval.replace('$','');firstval=firstval.replace(',','');secval=firstval.replace('$','');secval=firstval.replace(',','');//add valuesvar total=firstval + secval;//put , and $ back in placevar total2=addCommasandsign(total);//insert in htmldocument.getElementById('totalAmount').innerHTML=total2; There seem to be a small problem in the calculation though. I get an total amount of $1,133.791133 instead of $3,033.79 See this live example: jsfiddle.net/LGNwSYou know what the problem could be? Link to comment Share on other sites More sharing options...
Synook Posted September 15, 2011 Share Posted September 15, 2011 Your live example isn't loading for me, but it's probably just due to floating point errors - try rounding the value of total to two decimal places (by multiplying, rounding, then dividing) using Math.round(). Link to comment Share on other sites More sharing options...
dsonesuk Posted September 15, 2011 Share Posted September 15, 2011 First you are replacing the secval with firstval when replacing '$' and ',' firstval=firstval.replace('$','');firstval=firstval.replace(',','');secval= firstval .replace('$','');secval= firstval .replace(',',''); at this point it is still treated as text, adding them together will produce 1133.791900.00, this is where parseFloat() comes into play to convert text into a numeric float value, so you should have firstval=firstval.replace('$','');firstval=firstval.replace(',','');secval=secval.replace('$','');secval=secval.replace(',',''); //add valuesvar total=parseFloat(firstval) + parseFloat(secval);//put , and $ back in placevar total2=addCommasandsign(total);//insert in htmldocument.getElementById('totalAmount').innerHTML=total2; Link to comment Share on other sites More sharing options...
Macchiato Posted September 15, 2011 Author Share Posted September 15, 2011 That did the trick! Thank you so much dsonesuk! P.S. I've updated the example, you can find it here Link to comment Share on other sites More sharing options...
dsonesuk Posted September 15, 2011 Share Posted September 15, 2011 you would also need to use toFixed(n) as if you had <p id="firstAmount">$1,133.00</p><p id="secondAmount">$1,900.00</p> the zeros after the decimal point would disappear, so you end up with $3,033 to fix use below var total2=addCommasandsign(total.toFixed(2)); Link to comment Share on other sites More sharing options...
Macchiato Posted September 15, 2011 Author Share Posted September 15, 2011 Thank you for notifying me, I hadn't even noticed that yet Updated the code here Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.