String to number conversion

[sdustinh]

I've got a number set up in my document like this

<span id="anID">0</span>

and using javascript, I'm pulling the value of that using

var theValue = document.getElementById("anID");
theValue.innerHTML = theValue.innerHTML + 10;
 

What I'm trying to do is pull the value inside of the span tags (0), and then add it to something else (10) to spit out a final value inside of that span tag. This is being called multiple times, so it needs to pull what's in there currently, add 10 to it, and then set the innerHTML to the new value.

The problem is I can't get it to do this correctly. My first thought was the 0 it's pulling from the span tags is being pulled as a string because it would spit out something like "010" and if i added another one, say 20, to it then it would spit out "01020" and so on. I've tried using Number() and parseInt() to convert it to a number, add them, and put it back out there.

Does anyone know if I'm just doing something wrong or missing out on some great function that will take care of this? Thanks!

[acoder]

Try:

theValue.innerHTML = parseInt(theValue.innerHTML) + 10;

[sdustinh]

Thanks for the reply.

I've tried that, and for some reason it combines them like they are both strings.

var sz = 123;
//theValue.innerHTML = 0;
theValue.innerHTML = parseInt(theValue.innerHTML) + sz;

So when it combines the two, it outputs "0123" rather than just "123" and it's the same when you try to do it again and add, say 10, it will spit out "8310"

I'm not really sure what's going on. I haven't really run into this before. Thanks for the help!

[acoder]

Post your full code. It should definitely work.

[sdustinh]

Well, it's part of a larger script, so I'll put the relevant parts.

function updatePart (hd, sz, dispType) {
    var totalHDspace = document.getElementById(hd + '-total');
    //var totalHDspaceUp = document.getElementById(hd + '-total');
 
    switch (dispType) {
        case "update":
            totalHDspaceUp.innerHTML = parseInt(totalHDspaceUp.innerHTML) + sz;
        break;
 
        case "create":
            totalHDspace.innerHTML = parseInt(totalHDspace.innerHTML) + sz;
        break;
    }
 
}
 
updatePart('hdpart-1', 123, 'create');

[PHP]<dl id="part_list">
<dt>Hard Drive Space</dt>
<?php
for ($i=0; $i<count($ksServerCfg['hard_drive']); $i++) {
echo "<dd>HD#".($i+1).": <span id='hdpart-".($i+1)."-total'>0</span> GB of ".$ksServerCfg['hard_drive'][$i]." GB used</dd>";
}
?>
</dl>[/PHP]

I use PHP to loop through all of the parts I need (in this case there are three), and assign them a unique ID (hdpart-1-total, hdpart-2-total, etc). Then I call updatePart() as the user interacts with the site. It works fine as far as updating the span tag, it just doesn't update it correctly.

I thought that this may be because I was originally calling totalHDspace multiple times and didn't give it a unique name, so I have two of them up there. I've used alert() to watch the different variables as they go through the function, and it all works fine until it tries to pull the innerHTML and add it to sz.

Oh, when I do this...

updatePart('hdpart-1', 123, 'create');
alert(parseInt(totalHDspace.innerHTML) + sz);

I get '0123'

[acoder]

I've just tested your code and it works fine. Which browser are you using?

Perhaps, you can provide a test link to the whole page. If not, when and how do you call updatePart()?

[sdustinh]

totalHDspace.innerHTML = parseInt(totalHDspace.innerHTML) + parseInt(sz)

Because I was using a varible to pass it over, I had to add a parseInt() to that as well. I was getting random numbers from it because it was trying to convert it to hex or something.

Thanks for the help!

[acoder]

That's something to always look out for in future.

Glad to hear that you got it working.