I get NaN error when trying to create a basic calculator

Question

I'm 3 days into learning Javascript and im really excited to understand more of this language, before i started i've done a basic HTML & CSS education. I'm currently on a 2 year program in a University in Sweden.

I'm trying to create a very basic calculator, that for now only adds 2 numbers together. I have 1 box, and another box. I want to make that each number written in each of these boxes is displayed as the total of box1, box2 in the third and final box.

At this moment i get "NaN" in the 3rd box when trying to add 2+3.

As i said, I'm really new and i appreciate all help i can get, and note that im not here for anyone to do my assignments which we have plenty of, i am really interessted in learning and understanding the language because i would like to work with this later in life when im done with my education.

Cheers!

<h1>Addera två tal med varandra</h1>

<form>
  <input type="text" value="0" id="tal1" /> <br>
  <input type="text" value="0" id="tal2" /> <br>
  <input type="button" value="Beräkna" onClick="kalkylera();" />
  
  <p>Den totala summan är</p>
  <input type="text" value="0" id="svar" />
</form>

<script>
  function kalkylera() {

    //Get the two numbers entered in the box
    var ForstaTalet = document.getElementById("tal1").value;
    var AndraTalet = document.getElementById("tal2").value;

    //Count the two entered numbers together
    var svar = tal1 + tal2;

    //Show result
    document.getElementById("svar").value = svar;

  }
</script>

PS, I'm not sure why "//# sourceURL=pen.js" is written i the bottom of the calculator when adding this to the codepen, that is not how it looks when viewing it in chrome.

Thanks in advance.

You should do `parseFloat(ForstaTalet) + parseFloat(AndraTalet)` and not `tal1 + tal2` — adiga, Nov 13 '19 at 08:38
Also, it is not throwing any error when using undeclared variables because `tal1` and `tal2` are global variables: [Do DOM tree elements with ids become global variables?](https://stackoverflow.com/questions/3434278) — adiga, Nov 13 '19 at 08:40

score 0 · Answer 1 · answered Nov 13 '19 at 08:41

0

You need to cast your values as float with parseFloat and use the right variables as in the following example:

//Get the two numbers entered in the box
var ForstaTalet = parseFloat(document.getElementById("tal1").value);
var AndraTalet = parseFloat(document.getElementById("tal2").value);

//Count the two entered numbers together
var svar = ForstaTalet + AndraTalet;

//Show result
document.getElementById("svar").value = svar;

answered Nov 13 '19 at 08:41

Emanuele Scarabattoli

4,103
1
12
21

Hi! That made it work! I will look up exactly the diffrence is when adding parseFloat, in the video we got from our teacher he does not talk about this parse.. Thanks a lot for you help!! :) – Niqqo Nov 13 '19 at 08:51
So the answer is correct for you? In this case mark it as correct – Emanuele Scarabattoli Nov 13 '19 at 08:52

score 0 · Accepted Answer · answered Nov 13 '19 at 08:50

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Calculator</title>
</head>
<body>
    <form>
    <input type="text" placeholder='num1' id="tal1"/> <br>
    <input type="text" placeholder='num2' id="tal2"/> <br>
    <input type="button" value="Add" onClick="sum()"/>
    <input type="text" placeholder='sum' id="svar"/>
    </form>
    <script>
        function sum()
        {
            var ForstaTalet = parseFloat(document.getElementById("tal1").value);
            var AndraTalet = parseFloat(document.getElementById("tal2").value);
            var svar = ForstaTalet + AndraTalet;
            document.getElementById("svar").value = svar;
        }
    </script>
</body>
</html>

This works fine.

I get NaN error when trying to create a basic calculator

2 Answers2