convert a string to a number, do math on it, then convert it back and give the span that value as a string

Question

i am trying to take entered values from textboxes and convert them to strings, total the amount, and then set the innerHTML of a <span> to that value.

function addBills(){
    var 
        hundreds = parseInt($("#input100").innerHTML(),10)*100;
        fifties = parseInt($("#input50").innerHTML(),10)*50;
        twenties = parseInt($("#input20").innerHTML(),10)*20;
        tens = parseInt($("#input10").innerHTML(),10)*10;
        fives = parseInt($("#input5").innerHTML(),10)*5;
        ones = parseInt($("#input1").innerHTML(),10);
        regTotal = hundreds+fifties+twenties+tens+fives+ones;
    window.alert(regTotal);
    /*var regTotal = (($("#input100").innerHTML * 100)+($("#input50").innerHTML * 50)+($("#input20").innerHTML * 20)+($("#input10").innerHTML * 10)+($("#input5").innerHTML *5)+($("#input1").innerHTML));*/
    for(var counter = 0;counter<regTotal;counter++){
        regString = regTotal.toString();
        $("#totalCount").innerHTML("regTotal");
    }
};

innerHTML() should be html(). You're mixing jQuery and plain js. — bfavaretto, Dec 09 '13 at 00:47
sorry haha. That is what I have, and it isnt working. I feel like im close. — user3081171, Dec 09 '13 at 00:47
ya I had just changed that and I am getting NaN returned, and it isnt changing my span. — user3081171, Dec 09 '13 at 00:50
what do you want? input fields or textarea's?? Javascript or jquery.. this is getting a mess.. — GitaarLAB, Dec 09 '13 at 00:51
These are input fields. I want whatever is necessary to convert these values to numbers, do the necessary mathematical operations, then convert it back to a string and make my tag display the value. Sorry for the confusion I was having a hard time figuring out how to ask — user3081171, Dec 09 '13 at 00:53
`span.innerHTML=''+(Number(elm_a.value)+Number(elm_b.value));` etc. Voila. PS: what's the idea behind the totally broken var (only `hundreds` are local)? — GitaarLAB, Dec 09 '13 at 00:59

GitaarLAB · Accepted Answer · 2013-12-09T01:55:50.350

1

You're Doing It Wrong

For starters.

function addBills(){
    var 
        hundreds = parseInt($("#input100").innerHTML(),10)*100;

hundreds is the only local var. All others are global. Fix: use comma's instead of semicolons to separate variables in one var-statement.

Secondly inputfields have a value (not innerHTML, and especially not innerHTML() as a function).
inputfields values are always text. One can convert them to numbers by either Number(string) or parseInt(string, radix/base) (or adding a + in front of the string).

Finally, once you have the span-element you thus simply do: elm_span.innerHTML=yourNumber; and bob's your uncle!

EDIT:
Your current loop makes no sense.. I mean, if regTotal is the total of the cash... and you have one span with the unique id totalCount... it's completely pointless (just as trying to convert the totalCount to string a couple of thousands of times)

You probably want something like:

function addBills(){
   var hundreds = Number(document.getElementById('input100').value)*100
   ,   fifties = Number(document.getElementById('input50').value)*50
   ,   twenties = Number(document.getElementById('input20').value)*20
   ,   tens = Number(document.getElementById('input10').value)*10
   ,   fives = Number(document.getElementById('input5').value)*5
   ,   ones = Number(document.getElementById('input1').value)
   ,   regTotal = hundreds+fifties+twenties+tens+fives+ones
   ; //end local
   document.getElementById('totalCount').innerHTML=regTotal;
}

Working example fiddle here

Hope this helps!

edited Dec 09 '13 at 01:55

answered Dec 09 '13 at 01:08

GitaarLAB

14,536
11
60
80

The value worked and I can get the alert to show the right value(I only did this to test the math functions) but It isn't changing the span. – user3081171 Dec 09 '13 at 01:32
I want it to display the number as it goes up from 1 to the total number. I meant to change it to the counter, thats actually something I missed. – user3081171 Dec 09 '13 at 01:39
for(var counter = 0;counter – user3081171 Dec 09 '13 at 01:46
Do you want to make the span value count-up to the total value? Like a fast running clock? In that case you'd need to do a timeout since (I hope) your computer is faster in counting than it can display (or what you could see IF the value was updated multiple times, which it isn't, it normally renders the final result, hence the timeout (or interval). – GitaarLAB Dec 09 '13 at 01:58
well getting it to display the result at all would be fine for now – user3081171 Dec 09 '13 at 02:01
Well the fiddle (in the edit to my answer) does what you want. Should you want something counting up like this ***crude*** fiddle: http://jsfiddle.net/WvE6g/1 then you need to do some more homework on that! However, this is pointless as it will hog cpu/browser and will frustrate the user, *especially* if he had good sales-day and has to wait for the counter to count-up to ... say >2000 dollars.. Think about this, let it sink in!! Good luck! – GitaarLAB Dec 09 '13 at 02:47
ya I decided against this. I was wanting something to count up fast but at the speed I want, it is pointless. Thank you for all of your help. While I have you since you went through all of that, When I display, how do I add ".00" to anything that is not displaying a "."? – user3081171 Dec 09 '13 at 03:06
I didn't mention it since you used bills, thus working with integers (so no floating point decimals, or cents for this purpose). If you continue to do this, just do: `element.innerHTML=regTotal+'.00';`. If you *do* decide to do math on cents, then be prepared, since `0.1+0.2` ***is not*** `0.3`! Start reading at http://stackoverflow.com/q/588004/588079. Essentially you must decide the number of decimals you need to be accurate and scale-up your calculations by that factor (working in cents) and divide by 100 for output. You could end with `number.toFixed(2)`, forcing 2 decimal digits. YMMV – GitaarLAB Dec 09 '13 at 04:24

convert a string to a number, do math on it, then convert it back and give the span that value as a string

1 Answers1