Question

我需要为在线计算器创建示例HTML文档，我使用下面的代码来满足要求：

<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

任何人都可以帮助我，我在这里做错了吗？

请不要被德国人的名字搞糊涂。

Answer 1

您正在调用不存在的方法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>

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

Answer 3

应该是document.getElementById("num1").value;而不是document.getElementsById("num1").value;

输入值之和不返回任何内容或NaN

3 个答案: