Javascript not adding two string numbers using parseInt function

Question

I have two < div > section having numbers inside. When number present in 1st < div > is clicked , 2nd content should show twice the value of 1st < div >.

I used following code but not working.

<div id="left"><a href="#" onclick="document.getElementById('right').innerHTML = (parseInt(document.getElementById('left').innerHTML) + parseInt(document.getElementById('left').innerHTML))">1</a></div>

<div id="right">1</div>

But the output is coming as

NaN

Can somebody help with correct code ? Thanks

If `parseInt(x)` is giving `NaN` then `NaN + y` is `y + NaN` is `NaN`. — Paul S., Jul 14 '13 at 17:19
@logan I'm saying you're providing the wrong input, not using the wrong function. — Paul S., Jul 14 '13 at 17:21
please see the value of div2, its 1 ; so its not a string. its a number...
1 — logan, Jul 14 '13 at 17:22
@logan no its for best practices and readability [read this question on unobtrusive javascript](http://stackoverflow.com/questions/4478795/what-is-unobtrusive-javascript-in-layman-terms) and [the wikipedia articule](http://en.wikipedia.org/wiki/Unobtrusive_JavaScript) — Jay Harris, Jul 14 '13 at 17:49

adeneo · Accepted Answer · 2013-07-14T17:25:33.977

2

The element #left contains the entire anchor, so you're getting all the HTML of the anchor back, and not just the number, which is why parseInt spits out NaN.

In other words:

document.getElementById('left').innerHTML

will return:

<a href="#" onclick="document.getElementById('right').innerHTML = (parseInt(document.getElementById('left').innerHTML) + parseInt(document.getElementById('left').innerHTML))">1</a>

And when parsing that as an integer it returns NaN ?

FIDDLE

You can solve it by doing:

<div id="left"><a href="#" onclick="calc(this); return false;">1</a></div>
<div id="right">1</div>

<script type="text/javascript">
    function calc(elem) {
        var val = parseInt(elem.innerHTML,10) * 2;
        document.getElementById('right').innerHTML = val;
    }
</script>

FIDDLE

edited Jul 14 '13 at 17:25

answered Jul 14 '13 at 17:19

adeneo

312,895
29
395
388

1

You can parse it as an Integer, it just gives you `NaN`. Also, I'd suggest using `.textContent` over `.innerHTML` for this task. – Paul S. Jul 14 '13 at 17:25
@PaulS. - well, yeah I suppose. – adeneo Jul 14 '13 at 17:26
@PaulS. .parseInt(document.getElementById('left').textContent is working fine... Thanks – logan Jul 14 '13 at 17:37

Javascript not adding two string numbers using parseInt function

1 Answers1