Javascript: Simple addition program not working

Question

I'm trying to create a program that'll add two numbers when clicked on a button.

However, it's not working, I am totally confused what's wrong. In this program user is supposed to enter 2 numbers and program gives user the sum on the click.

Here's the Code:

<html>

    <body>
        <p>For adding two numbers</p>

        <button onclick="myFunction()">Calculate</button>
        <br/>
        <input type="text" placeholder="1st number" id="1st" name="txt1">
        <br/>+
        <br/>
        <input type="text" placeholder="2nd number" id="2nd" name="txt2">

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

        <script>
        function myFunction() {
            var a = document.getElementById("1st").value;
            var b = document.getElementById("2nd").value;
            var c = number(a) + number(b);

            document.getElementById("demo").innerHTML = c;
        }
        </script>
    </body>

</html>

where is JQuery? this problem is easily solved by JQuery

Display Name
– Display Name

2015-09-14 11:08:38 +00:00
Commented Sep 14, 2015 at 11:08 — Display Name
– Display Name, Commented Sep 14, 2015 at 11:08

Tushar · Accepted Answer · 2015-09-14 10:15:11Z

2

The n in number should be uppercase. number should be Number.

Demo

function myFunction() {
  var a = document.getElementById("1st").value;
  var b = document.getElementById("2nd").value;
  var c = Number(a) + Number(b);

  document.getElementById("demo").innerHTML = c;
}

<button onclick="myFunction()">Calculate</button>
<br/>
<input type="text" placeholder="1st number" id="1st" name="txt1">
<br/>+
<br/>
<input type="text" placeholder="2nd number" id="2nd" name="txt2">
<p id="demo"></p>

answered Sep 14, 2015 at 10:15

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

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

Comments

alamin · Accepted Answer · 2015-09-14 10:30:50Z

2

according to W3Schools

Definition and Usage The Number() function converts the object argument to a number that represents the object's value.

If the value cannot be converted to a legal number, NaN is returned.

The Syntax of Number() function :

Number(object)

Here object is provided. if nothing then returns zero

so in your code snippet

var c = number(a) + number(b) ;

you just change it with

var c = Number(a) + Number(b) ;

edited Sep 14, 2015 at 10:30

answered Sep 14, 2015 at 10:17

alamin

2,4972 gold badges28 silver badges31 bronze badges

5 Comments

Johan Over a year ago

This is not the case for html5: w3.org/TR/html5/dom.html#the-id-attribute says html only needs any 1 character.

Tushar Over a year ago

There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc.

From specs

alamin Over a year ago

yes i m writing the full code. and testing it again and posting a modified version in a minute

ro͢binmckenzie Over a year ago

HTML 4.0 does restrict IDs to starting with a letter. stackoverflow.com/questions/70579/…

alamin Over a year ago

but i think HTML5.0 is what we are discussing

Collectives™ on Stack Overflow

Javascript: Simple addition program not working

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related