Sum of input values returns nothing or NaN

Question

I have a requirement to create a sample HTML document for an Online calculator and I have used below code to meet the requirement:

<html>
  <head>
    <title>Rechner</title>
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <div id="container">
      <center>
        <form>
          <input type="number" placeholder="Zahl 1" name="num1" id="num1" class="num" autofocus required><br>
          <input type="number" placeholder="Zahl 2" name="num2" id="num2" class="num" required><br>
          <output placeholder="Ergebnis" class="text" id="Ergebnis"><br>
          <button class="btn" onclick="berechnen()">Rechne!</button>
        </form>
      </center>
    </div>

    <script>
        function berechnen() {
          var zahl1 = document.getElementsById("num1").value;
          var zahl2 = document.getElementsById("num2").value;
          var ergebnis = Number(zahl1) + Number(zahl2);
          document.getElementById("Ergebnis").value = ergebnis;
        }
    </script>
  </body>
</html>

But, whenever I try to calculate any numbers it either displays nothing or NaN

Can any one help me out, what I am doing wrong here?

Please dont get confused by the german names.

There are typos in your code: document.getElementsById("num1").value; should be document.getElementById("num1").value; without the 's' — BFG, Feb 24 '17 at 09:28
There is a typo in "document.getElementsById".........it should be "document.getElementById" — Mamun, Feb 24 '17 at 09:30
Avoid the `Number` constructor: http://stackoverflow.com/questions/369220/why-should-you-not-use-number-as-a-constructor `parseInt`/`parseFloat` are usually preferred — danwellman, Feb 24 '17 at 09:30
There's no way this code displays `NaN` or anything else – the typos would throw an error long before that. — JJJ, Feb 24 '17 at 09:35
THIS IS RIDICULOUS !! this type of questions shouldn't be on StackOverflow! This kind of typing mistakes in most widely used functions can not be a query! — Mushfiq, Feb 24 '17 at 10:00

Alex · Answer 1 · 2017-02-24T09:36:14.903

You are calling the non-existing method getElementsById. You should call getElementById instead. I have place your button before the output, so it doesn't disappear after the calculation.

<html>
  <head>
    <title>Rechner</title>
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <div id="container">
      <center>
        <form>
          <input type="number" placeholder="Zahl 1" name="num1" id="num1" class="num" autofocus required><br>
          <input type="number" placeholder="Zahl 2" name="num2" id="num2" class="num" required><br>
          <button class="btn" onclick="berechnen()">Rechne!</button><br>
          <output placeholder="Ergebnis" class="text" id="Ergebnis">        
        </form>
      </center>
    </div>

    <script>
        function berechnen() {
          var zahl1 = document.getElementById("num1").value;
          var zahl2 = document.getElementById("num2").value;
          var ergebnis = Number(zahl1) + Number(zahl2);
          document.getElementById("Ergebnis").value = ergebnis;
        }
    </script>
  </body>
</html>

score 2 · Accepted Answer · answered Feb 24 '17 at 09:33

2

There are 2 issues:

Set the button type to be button. This will prevent the page from reloading when you click on it
You should use getElementById instead of getElementsById

As such, you should have something similar to:

<form>
  ...
  <button type="button" class="btn" onclick="berechnen()">Rechne!</button>
</form>

<script>
    function berechnen() {
      var zahl1 = document.getElementById("num1").value;
      var zahl2 = document.getElementById("num2").value;
      var ergebnis = Number(zahl1) + Number(zahl2);
      document.getElementById("Ergebnis").value = ergebnis;
    }
</script>

answered Feb 24 '17 at 09:33

Sylvan D Ash

1,047
13
24

Thanks for your help! do you maybe know why the button disappers when I click on it? – JBM Feb 24 '17 at 09:58
Yes. That's because you haven't closed the `` tag. You'll need to close it before the `
` tag – Sylvan D Ash Feb 24 '17 at 10:02

score 1 · Answer 3 · answered Feb 24 '17 at 09:30

1

it should be document.getElementById("num1").value; and not document.getElementsById("num1").value;

answered Feb 24 '17 at 09:30

Sumeet kumar

49
7

Sum of input values returns nothing or NaN

3 Answers3