總和的輸入值的返回任何內容或NaN

我有一個要求，以創建一個示例HTML文檔的在線計算器和我用下面的代碼來滿足需求：總和的輸入值的返回任何內容或NaN

<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>

但是，每當我試圖計算它顯示的任何數字nothing或NaN

任何人都可以幫助我，我在這裏做錯了什麼？

請不要被德國人的名字混淆。

來源

2017-02-24 JBM

有在你的代碼錯別字：document.getElementsById（「num1」）。value;應該是document.getElementById（「num1」）.value;沒有's' – BFG

在「document.getElementsById」中有一個拼寫錯誤.........它應該是「document.getElementById」 – Mamun

避免使用'Number'構造函數：http://stackoverflow.com/questions/369220/why-you-not-use-number-as-a-constructor'parseInt' /'parseFloat'通常是首選 – danwellman

有2個問題：

設置按鈕類型爲button。這將阻止該網頁重新加載，當你點擊它
您應該使用getElementById代替getElementsById

因此，你應該有類似的東西：

<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>

來源

2017-02-24 09:33:08

感謝您的幫助！你也許知道當我點擊它時爲什麼按鈕會消失？ – JBM

是的。那是因爲你還沒有關閉''標籤。你需要在'
'標籤之前關閉它 –

您正在調用不存在的方法getElementsById。您應該撥打getElementById。我已將您的按鈕放在輸出之前，因此在計算後它不會消失。

<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>

來源

2017-02-24 09:28:45 Jaco

應該document.getElementById("num1").value;而不是document.getElementsById("num1").value;

來源

2017-02-24 09:30:27

總和的輸入值的返回任何內容或NaN

回答

相關問題