时间戳

首页 > 解决方案 > 如何添加两个输入值并显示在第三个输入框中？？像这样简单的 JavaScript 可以帮助我在哪里出错

javascript - 如何添加两个输入值并显示在第三个输入框中？？像这样简单的 JavaScript 可以帮助我在哪里出错

问题描述

1）我想将两个输入框的值相加，并在第三个输入中显示。它显示一个错误

2）错误：未捕获的TypeError：无法在HTMLButtonElement.onclick（js.php：12）处读取总和（js.php：21）的null属性“值”

<!DOCTYPE html>
<html>

  <head>
    <title>JavaScript</title>
    <script type="text/javascript">
      function sum() {
        var val1 = document.getElementById('val1').value;
        var val2 = document.getElementById('val2').value;
        var sum = val1 + val1;
        document.getElementById('total').value = sum;
      }

    </script>
  </head>

  <body>
    <input type="text" name="val1"><br><br>
    <input type="text" name="val2"><br><br>
    <input disabled name="total" value=""><br><br>
    <button type="button" onclick="sum()" name="btn">Add</button>
  </body>

</html>

我期望两个输入的总和，但它什么也没显示。

标签： javascriptphphtml

解决方案

document.getElementsByName返回元素的 NodeList，因此它没有 property .value。

这是getElementsByName片段。

<!DOCTYPE html>
<html>

<head>
  <title>JavaScript</title>
  <script type="text/javascript">
    function sum() {

      var val1 = document.getElementsByName('val1')[0].value;
      var val2 = document.getElementsByName('val2')[0].value;
      var sum = parseInt(val1) + parseInt(val2); // by default it appends a string. Hence, parseInt to parse string to integer

      document.getElementsByName('total')[0].value = sum;
      console.log(document.getElementsByName('total')[0].value);
    }
  </script>
</head>

<body>
  <input type="text" name="val1"><br><br>
  <input type="text" name="val2"><br><br>
  <input type="hidden" name="total" value=""><br><br>
  <button type="button" onclick="sum()" name="btn">Add</button>
</body>

</html>

这是getElementById片段

<!DOCTYPE html>
<html>

<head>
  <title>JavaScript</title>
  <script type="text/javascript">
    function sum() {
      var val1 = document.getElementById('val1').value;
      var val2 = document.getElementById('val2').value;
      var sum = parseInt(val1) + parseInt(val1); // by default it appends a string. Hence, parseInt to parse string to integer

      document.getElementById('total').value = sum;
      console.log(document.getElementById('total').value);
    }
  </script>
</head>

<body>
  <input type="text" name="val1" id="val1"><br><br>
  <input type="text" name="val2" id="val2"><br><br>
  <input type="hidden" name="total" value="" id="total"><br><br>
  <button type="button" onclick="sum()" name="btn">Add</button>
</body>

</html>

推荐阅读