Cant add input and display the sum in JavaScript

Question

To learn and study JavaScript, im trying to do a calculator, and as start i tried to do a sum operation by taking 2 input. But somehow there is a problem that i cant see. Can you help me?

Here is the code:

<html> 
    <body>
        <h1> JavaScript Test </h1>
        Sum The Nums Up!
        <br>
        <form>
            Number 1: <input type="text" name="n1" /><br>
            Number 2: <input type="text" name="n2" /><br>
        </form>
        <button id="b" onclick="func();" />Sum</button>
        <p id="b"></p>
        <script type="text/javascript">
            function sum() {
                var nn1 = document.getElementById("n1").value;
                var nn2 = document.getElementById("n2").value;
                var sum = parseInt(nn1) + parseInt(nn2);
                document.write(sum);
            }
        </script>
    </body>
</html>

And if you want to keep the "form" you have and display the results in #b, change document.write(sum); to document.getElementById('b').innerHTML = sum; — user1932079
– user1932079, Commented Jun 23, 2014 at 6:54
<input type='text' name='n1'> + document.getElementById('n1') won't fly: the input elements don't have an id property, only a name attribute. document.write is evil, BTW... — Elias Van Ootegem
– Elias Van Ootegem, Commented Jun 23, 2014 at 7:09
@Cerbrus: Of course, that would be evil, instead of merely evil :-) — Elias Van Ootegem
– Elias Van Ootegem, Commented Jun 23, 2014 at 7:19

Cerbrus · Accepted Answer · 2014-06-23 07:02:05Z

1

Replace:

function sum() {

With:

function func() {

This prevents you from assigning 2 different types / values to the same variable name.
(You've got an sum function and a sum variable in your question.)

Replace:

document.write(sum);

With

document.getElementById('b').innerHTML = sum;

This snippet adds the result of sum to <p id="b"></p> (So, the result may be: <p id="b">18</p>, for example), instead of arbitrarily adding it to the end of your HTML.

And finally, replace:

Number 1: <input type="text" name="n1"/><br>
Number 2: <input type="text" name="n2"/><br>

With:

Number 1: <input type="text" id="n1"/><br>
Number 2: <input type="text" id="n2"/><br>

document.getElementById looks for the id attribute in your HTML, not for the name.

edited Jun 23, 2014 at 7:02

answered Jun 23, 2014 at 6:56

Cerbrus

73.3k19 gold badges138 silver badges151 bronze badges

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

3 Comments

Mustafa sabir Over a year ago

Would the sum naming really matter ? I think sum() from onclick="sum();" would point to the function sum() with no problem and .write(sum); woul point wihtout problem to the var sum

Cerbrus Over a year ago

Yea, I know the var sum is scoped to the function, but it's bad form to re-use names that way. Forget the var just once, and your function no longer exists after running it. It works, but it's "risky". That's why I suggested that change.

Mustafa sabir Over a year ago

Hmmm true, use strict also helps in such cases :)

Cerbrus · Accepted Answer · 2014-06-23 07:07:15Z

1

There are two problems:-

Change onclick="func();" to onclick="sum();" , you are calling the wrong/undefined function.

<button id="b" onclick="sum();"/>Sum</button>

Assign input tags id as n1 and n2, you have assigned them as name and are referring to them based on id getElementById()

Number 1: <input type="text" id="n1"/><br>
Number 2: <input type="text" id="n2"/><br>

edited Jun 23, 2014 at 7:07

Cerbrus

73.3k19 gold badges138 silver badges151 bronze badges

answered Jun 23, 2014 at 6:58

Mustafa sabir

4,3801 gold badge23 silver badges30 bronze badges

Comments

Unknownman · Accepted Answer · 2014-06-23 07:11:50Z

-1

        <html>
        <body>
        <h1> JavaScript Test </h1>
        Sum The Nums Up!
        <br>
        <form>
        Number 1: <input type="text" id="n1" name="n1"/><br>
        Number 2: <input type="text" id="n2" name="n2"/><br>
        </form>
        <button id="b" onclick="sum();"/>Sum</button>
        <p id="b"></p>
        <script type="text/javascript">
        function sum()
        {
            var nn1 = document.getElementById("n1").value;
            var nn2 = document.getElementById("n2").value;
            var sum = parseInt(nn1) + parseInt(nn2);
            document.write(sum);
            }
        </script>
        </body>
        </html>

answered Jun 23, 2014 at 7:11

Unknownman

4833 silver badges9 bronze badges

Collectives™ on Stack Overflow

Cant add input and display the sum in JavaScript

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related