Jump to content
Macchiato

Add Amounts And Put In Element

Recommended Posts

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>

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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().

Share this post


Link to post
Share on other sites

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;

Edited by dsonesuk
  • Like 1

Share this post


Link to post
Share on other sites

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));

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...