Learning Javascript: adding 2 numbers

Question

I am learning javascript and trying to complete a simple excercise: add 2 numbers that are entered in 2 separate entry field and show the sum on a page. The script below is executed when you press a button. The problem I'm somehow unable to solve is that the result of the addition is always zero. What I am doing wrong here?

    var inputA = document.getElementById("numberA"); 
    var convertA = +inputA;
    var inputB = document.getElementById("numberB");
    var convertB = +inputB;

    function myFunction() {
    document.getElementById("result").innerHTML = convertA + convertB;
    }

As you starting, you should first think about using the console inside your browser. You can add breakpoint to debug your code. You can also add debugger in your code to automatically stop the script when the console is open. You can also use console.log(yourVariable) to display the value of your variable — Weedoze
– Weedoze, Commented Nov 9, 2016 at 13:31

Nina Scholz · Accepted Answer · 2016-11-09 14:47:18Z

5

You need to take the value of the text input .

var inputA = document.getElementById("numberA").value;
//                                             ^^^^^^

Please move the variables inside into the function, because the value property returns a string and not a referece to the object.

function myFunction() {
    var inputA = document.getElementById("numberA").value; 
    var inputB = document.getElementById("numberB").value;
    var convertA = +inputA;
    var convertB = +inputB;
    document.getElementById("result").innerHTML = convertA + convertB;
}

<input id="numberA" type="text">
<input id="numberB" type="text">
<button onclick="myFunction()">calc</button>
<div id="result"></div>

edited Nov 9, 2016 at 14:47

answered Nov 9, 2016 at 13:29

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

4 Comments

Alexander Raven Over a year ago

Thanks! I added .value to the script:

Alexander Raven Over a year ago

<!DOCTYPE html> <html> <head> <script> var inputA = document.getElementById("numberA").value; var convertA = +inputA; var inputB = document.getElementById("numberB").value; var convertB = +inputB; function myFunction() { document.getElementById("result").innerHTML = convertA + convertB; } </script> </head> <body> <h1>Head</h1> <p> A number:<input type="text" id="numberA"> <br><br> Another number:<input type="text" id="numberB"> </p> <button type="button" onclick="myFunction()">Press me</button> <p id="result"></p> </body> </html>

Alexander Raven Over a year ago

Sorry I'm messing up placing my comments ;) The script now returns NaN. The console says "uncaught type error: cannot read property 'value' of null

Nina Scholz Over a year ago

you need to move the inputA and inputB variables inside of the function, because any change does not affect the value anymore. please see above.

user6461366 · Accepted Answer · 2016-11-09 13:44:28Z

One example of this is to grab the values and then parse them into Integers before adding them together. Setting a value of 0 on the input prevents the user from getting a result of NaN. You could also remove these initial values and write an if statement to check for empty values.

Anyway here is what I came up with:

<!DOCTYPE html>
<html>
<head>
    <title>Test Function</title>
</head>
<body>
    <!-- Create Inputs -->
    <input id="numberA" type="number" value="0">
    <input id="numberB" type="number" value="0">

    <!-- Function Button -->
    <button onclick="myFunction()">Add Numbers</button>

    <!-- Display Result -->
    <div id="result"></div>

    <!-- Run Script -->
    <script>
        // Get Inputs by ID
        var inputA = document.getElementById("numberA"); 
        var inputB = document.getElementById("numberB");

        // Parse Values and Add Integers
        function myFunction() {
            document.getElementById("result").innerHTML = parseInt(inputA.value) + parseInt(inputB.value);
        }
    </script>
</body>
</html>

Sycraw · Accepted Answer · 2016-11-09 13:49:55Z

0

before start coding on Javascript I think that you must be aware about how it interacts with elements in page: every single element, is represented by DOM (Domain Object Model) and Javascript can interact with elements querying this DOM for obtain them, but in the form of their virtual representation: a DOM Object. That's what your trying to sum... two DOM objects that represents the input elements.

As objects, they have their own properties accessible by the dot sign, and for get the values of those fields, the answer of @Nina Scholz is the way.

So, when you get the element by Id, or elements by tag, by name etc, etc... you have to consider this.

answered Nov 9, 2016 at 13:49

Sycraw

5433 silver badges18 bronze badges

1 Comment

Sycraw Over a year ago

If you found this post useful, a +1 would be appreciate :)

Vladimir John Paguio · Accepted Answer · 2016-11-09 13:41:13Z

-1

Although not related. Base on Nina Scholz answer, You must take consider the type of input and change it to number so you will not end up with undefined or NaN result.

answered Nov 9, 2016 at 13:41

Vladimir John Paguio

11 silver badge2 bronze badges

Collectives™ on Stack Overflow

Learning Javascript: adding 2 numbers

4 Answers 4

4 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related