Subtraction problems in JavaScript

Question

So, in my JavaScript web app calculator, the addition works great. But, when I try to code the subtraction calculator, everything goes right, except for when I try the calculator out, the addition works fine, but when I try to subtract two numbers, it just says: NaN Here's my calculator. The subtraction calculator begins at the paragraph that says "Subtraction Calculator!"

Here's my code:

<!DOCTYPE html>
<html>
<body>
    <p>Addition Calculator!</p>
    <input id="n1" value=""/>
    <input id="n2" value=""/>
<button type="button" onclick="myFunction()">Submit</button>
    <p id="answer"></p>
    <script>
    function myFunction() {

        var n1=document.getElementById("n1").value;

        var n2=document.getElementById("n2").value;
        answer = ( Number(n1) + Number(n2) );

        document.getElementById("answer").innerHTML=answer;
    }


    </script>
    <p>Subtraction Calculator!</p>
    <input id="sn1" value=""/>
    <input id="sn2" value=""/>
    <button type="button" onclick="subtract()">Submit</button>
    <p id="sanswer"></p>

    <script>
    function subtract() {
        var sn1=document.getElementById("sn1").value;
        var sn1=document.getElementById("sn2").value;
        stotal = ( Number(sn1) - Number(sn2) );
        document.getElementById("sanswer").innerHTML=stotal;
    }


    </script>


    </body>

</html>

You probably want to [make a fiddle](http://jsfiddle.net/) to demonstrate this, instead of sharing code in Google Docs. That document may not be available for future visitors finding this question (you might delete it), whereas it will probably live a bit longer on JSFiddle. — Mattias Buelens, Jun 20 '13 at 21:29
Code in google docs - it's something I see for the first time — zerkms, Jun 20 '13 at 21:29
Downvotes don't mean that someone "hates" your question. It means "This question doesn't show any research effort; it is unclear or not useful". Don't take it personally. As for code formatting: http://stackoverflow.com/editing-help#code. There was also a yellow `?` button for the help and a box with tips on the right hand side when you were typing the question. — Felix Kling, Jun 20 '13 at 21:30
@zerkms I love writing programs in Microsoft Office PowerPoint. Sometimes, Word is better. — Ian, Jun 20 '13 at 21:30
@Ian: initially read it as "MS Paint". PowerPoint isn't that extreme — zerkms, Jun 20 '13 at 21:31
Well, since only one person here kind of helped, guess I'll just go look somewhere else... — user2506919, Jun 20 '13 at 21:33
@zerkms: http://stackoverflow.com/questions/5588649/how-did-this-person-code-hello-world-with-microsoft-paint — Esenti, Jun 20 '13 at 21:35
@user2506919: "guess I'll just go look somewhere else" - noooooooooooooooooooooooooooooooooooooooooooooooo — zerkms, Jun 20 '13 at 21:35

nnnnnn · Answer 1 · 2013-06-20T21:42:07.493

4

The problem is this line:

var sn1=document.getElementById("sn2").value;

You have a typo that you're creating a second sn1 variable instead of sn2. Which means on this line:

stotal = ( Number(sn1) - Number(sn2) );

...you might expect a reference error when you use sn2 but the browser is instead picking up the element with id="sn2" which gives NaN when run through the Number() function. And a subtraction involving NaN gives Nan.

So make it sn2 = ... and it'll be fine.

(Noting that as a general rule it is better not to use variable names that are the same as element ids, because then you don't accidentally get this sort of "weird" behaviour.)

Working demo: http://jsbin.com/ivobew/1/edit

edited Jun 20 '13 at 21:42

answered Jun 20 '13 at 21:32

nnnnnn

147,572
30
200
241

1

ctrl+f, "typo"; mark as too localized. – 000 Jun 20 '13 at 21:32
1

Confirmed that it works after this is fixed http://jsbin.com/opuzoh/1/edit – Paul S. Jun 20 '13 at 21:33

score 0 · Answer 2 · answered Jun 20 '13 at 21:37

Misnamed variable:

function subtract() {
        var sn1=document.getElementById("sn1").value;
        var sn1=document.getElementById("sn2").value;
        stotal = ( Number(sn1) - Number(sn2) );
        document.getElementById("sanswer").innerHTML=stotal;
    }

Second sn1 should be sn2.

Subtraction problems in JavaScript

2 Answers2