总和的输入值的返回任何内容或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

回答

相关问题