Why this javascript and html code is not calculating the result?

Question

This is the code:

<html>
<body>

<script>
function myFunction(var1,var2){
number=var1+var2
document.write(number)
}
</script>

<form>
Number 1 : <input type="text" name="no1"><br>
Number 2 : <input type="text" name="no2"><br>
<input type="button" onclick="myFunction(this.form.no1.value,this.form.no2.value)" value="submit">
</form>

<p id="demo></p

</body>
</html>

When I insert 10 for number 1 and 20 for number 2, the output is:

But i want it to display 30. What can i do?

**I have tried myFunction(10,20), the result is 30.

@EvanTrimboli: number=+var1+ +var2; also works, though it is hacky and less readable then parseInt() off course. — Nope
– Nope, Commented Feb 25, 2014 at 13:21
It will, but the OP seems to be just starting out, so less "magic" is better. — Evan Trimboli
– Evan Trimboli, Commented Feb 25, 2014 at 20:34

CJ Ramki · Accepted Answer · 2014-02-26 05:06:56Z

8

simply use parse the variable value to integer using parseInt() method or add "+"before to your variable name. Because variables var1 and var2 returning string. To calculate those variable values, you need to convert it as a integer.

using parseInt() method

number=parseInt(var1)+parseInt(var2)

use + before variable name to convert into integer,

number= +var1 + +var2

try this code,

<html>
    <body>
        <script>
        function myFunction(var1,var2){
            number = parseInt(var1) + parseInt(var2)
            //another way number= +var1+ +var2
            document.write(number)
        }
        </script>
    <form>
        Number 1 : <input type="text" name="no1"><br>
        Number 2 : <input type="text" name="no2"><br>
        <input type="button" onclick="myFunction(this.form.no1.value,this.form.no2.value)" value="submit">
    </form>

    <p id="demo"></p>

    </body>
</html>

using parseInt() DEMO

using + before variable name DEMO

edited Feb 26, 2014 at 5:06

answered Feb 25, 2014 at 13:07

CJ Ramki

2,6323 gold badges27 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nope Over a year ago

+1 and just for the sake of mentioning it, a short-hand implicit cast would be: number=+var1+ +var2; (space between + signs is important) i.e: "2" + "3" is "23", while +"2"+ +"3" is 5. Though parseInt() is off course the right way to go.

NiiL · Accepted Answer · 2014-02-25 13:03:14Z

2

modify your function with parseInt like:

<script>
    function myFunction(var1,var2){
        number=parseInt(var1)+parseInt(var2);
        document.write(number);
    }
</script>

You were getting output like 1020 because by default data from the textbox is taken as text type, so we need to convert it to Number Type first, for that we are using parseInt(for explicit conversion)

answered Feb 25, 2014 at 13:03

NiiL

2,8371 gold badge28 silver badges37 bronze badges

Comments

Geert Wille · Accepted Answer · 2014-02-25 13:04:10Z

Your javascript thinks you are appending strings... To make sure your javascript knows it's numbers your working with you need to convert it to that type.

<html>
    <body>
        <script>
        function myFunction(var1, var2){
            number = parseInt(var1, 10) + parseInt(var2, 10)
            document.write(number)
        }
        </script>
        <form>
            Number 1 : <input type="text" name="no1"><br>
            Number 2 : <input type="text" name="no2"><br>
            <input type="button" onclick="myFunction(this.form.no1.value,this.form.no2.value)" value="submit">
        </form>

        <p id="demo"></p>
    </body>
</html>

For more info about parseInt check this documentation.

myTerminal · Accepted Answer · 2014-02-25 13:09:00Z

2

Update your method to

function myFunction(var1,var2){
  number=parseInt(var1) + parseInt(var2)
  document.write(number)
}

As this.form.no1.value is returning a string, so both the numbers are concatenated as strings instead of summing up as numbers.

edited Feb 25, 2014 at 13:09

myTerminal

1,6661 gold badge15 silver badges31 bronze badges

answered Feb 25, 2014 at 13:03

Ishank Gupta

1,5931 gold badge14 silver badges19 bronze badges

Comments

myTerminal · Accepted Answer · 2014-02-25 13:02:46Z

1

Two options:

Change your input tag to

<input type="button" onclick="myFunction(parseInt(this.form.no1.value, 10),parseInt(this.form.no2.value, 10))" value="submit">

OR

Change your JavaScript function to

    function myFunction(var1,var2){
      var number=parseInt(var1, 10)+parseInt(var2, 10);
      document.write(number);
    }

answered Feb 25, 2014 at 13:02

myTerminal

1,6661 gold badge15 silver badges31 bronze badges

Comments

rusmus · Accepted Answer · 2014-02-25 13:03:33Z

1

It is because the values you extract from your input fields are strings. When you add two strings, they are usually concatenated. Try looking at the javascript method parseIntas Evan suggests in the comments or look at parseFloatif you want to allow floats.

parseFloat docs

Your method would then look like this:

function myFunction(var1,var2){
    number = parseFloat(var1) + parseFloat(var2)
    document.write(number)
}

answered Feb 25, 2014 at 13:03

rusmus

1,66511 silver badges18 bronze badges

Comments

varun · Accepted Answer · 2014-02-25 13:04:34Z

1

It's now just string concatenation. Please use "parseInt()" to get the result.

thanks.

answered Feb 25, 2014 at 13:04

varun

5334 silver badges12 bronze badges

Comments

Dropout · Accepted Answer · 2014-02-25 13:06:32Z

1

Your not doing a calculation, you are appending two Strings. In order to calculate the mathematical answer for var1 + var2 you should parse them to Integers.

result = parseInt(var1) + parseInt(var2);

answered Feb 25, 2014 at 13:06

Dropout

14k10 gold badges59 silver badges112 bronze badges

1 Comment

Dropout Over a year ago

Ok, I will at least give +1s to other people, because more people came up with the same answer. Thanks.

Collectives™ on Stack Overflow

Why this javascript and html code is not calculating the result?

8 Answers 8

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related