javascript doesn't return the desired value

Question

I try to implement the following simple equation (5+x=?) using html and JavaScript:

function count() {
  var x = document.getElementById("myInput").value;
  document.getElementById('execute').innerHTML = x + 5;
}

<div> 5 + <input type="number" id="myInput">
  <input type="button" value="=" onclick="count()">
  <span id="execute">?</span>
</div>

Unfortunately when I write for example 2 in the input field and then click on the button (=) it gives me as answer the number 52, instead of the answer that I would like to see – 7.

It seems that it just joins the new number next to 5, instead of adding it, like it is a string and not a number. I know it’s not the brightest function and it’s not very useful, but I will appreciate if you could give me a hint where I am wrong.

This will help me understand better JavaScript and continue my education.

`.value`s always return strings. Cast it to a number first, or `+` will concatenate. — CertainPerformance, Apr 30 '18 at 04:41

score 1 · Accepted Answer · answered Apr 30 '18 at 04:44

1

I hope this will help. Thank you.

    function count()
    {var x = document.getElementById("myInput").value;
        document.getElementById('execute').innerHTML = parseInt(x) + 5;}

<div> 5 + <input type="number" id="myInput">
    <input type="button" value="=" onclick="count()">
    <span id="execute">?</span>
    </div>

answered Apr 30 '18 at 04:44

Alexis

816
2
11
28

You don't know if it'll be an integer. `Number` is better. – CertainPerformance Apr 30 '18 at 04:48

score -2 · Answer 2 · answered Apr 30 '18 at 04:47

-2

Several ways to change a string to a number, for this example I use parseInt() with 10 for the radix.

function count() {
  var x = document.getElementById("myInput").value;
  var xn = parseInt(x,10);
  document.getElementById('execute').innerHTML = xn + 5;
}

<div> 5 + <input type="number" id="myInput">
  <input type="button" value="=" onclick="count()">
  <span id="execute">?</span>
</div>

answered Apr 30 '18 at 04:47

Mark Schultheiss

32,614
12
69
100

1

Please choose to close answer as dupe – Rajesh Apr 30 '18 at 04:48
@Rajesh this answer does differ from the other even if it is subtle. – Mark Schultheiss Jul 05 '19 at 16:00
Note: https://stackoverflow.com/a/6611870/125981 (not directly applicable due to the `type` on the input but also noted in my answer. I still stand by this given the "learning" comment from the OP. – Mark Schultheiss Jul 05 '19 at 16:10

javascript doesn't return the desired value

2 Answers2