doubeng9567
doubeng9567
2019-05-07 06:31
浏览 83

如何在第三个输入框中添加两个输入值并显示? 用这样简单的JavaScript帮助我在哪里错了[重复]

This question already has an answer here:

1)I want to add the values of two input boxes and show it in the third input. It shows an error

2)Error: Uncaught TypeError: Cannot read property 'value' of null at sum (js.php:21) at HTMLButtonElement.onclick (js.php:12)

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

I expected the sum of two inputs but it shows nothing.

</div>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

7条回答 默认 最新

  • doumicheng6732
    doumicheng6732 2019-05-07 06:36
    已采纳

    You should have the attribute id for the controls which you are referencing in your code with getElementById(). You also have to convert the string value to number to perform the arithmetic operation:

    function sum(){
      var val1 = document.getElementById('val1').value;
      var val2 = document.getElementById('val2').value;
      var sum = Number(val1) + Number(val2);
      document.getElementById('total').value = sum;
    }
    <input type="text" name="val1" id="val1"><br><br>
    <input type="text" name="val2" id="val2"><br><br>
    <input name="total" id="total" value=""><br><br>
    <button type="button" onclick="sum()" name="btn">Add</button>

    </div>
    
    点赞 评论
  • duanmo5724
    duanmo5724 2019-05-07 06:33

    document.getElementsByName returns a NodeList of elements so it doesn't have property .value.

    This is getElementsByName snippet.

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

    This is getElementById snippet

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

    </div>
    
    点赞 评论
  • dozc1071
    dozc1071 2019-05-07 06:33

    You should add Id to your input. You use getElementById, but your input doesn't have any id, so it will retourn null.

    <input type="text" name="val1" id="val1"><br><br>
    <input type="text" name="val2" id="id="val2"><br><br>
    <input type="hidden"  name="total" value="" id="total"><br><br>
    
    点赞 评论
  • doumaoao0182
    doumaoao0182 2019-05-07 06:34

    Try This

    <script>
     function sum(){
            var val1 = document.getElementById('val1').value;
            var val2 = document.getElementById('val2').value;
            var sum = +val1 + +val2;
           document.getElementById('total').value = sum;
          }  
    </script>
    
    <body>
        <input type="text" name="val1" id="val1"><br><br>
        <input type="text" name="val2" id="val2"><br><br>
         <input type="hidden"  name="total" id="total" value=""><br><br>
         <button type="button" onclick="sum()" name="btn">Add</button>
       </body>
    

    OR Fetch through name

    <script>
     function sum(){
            var val1 = document.getElementsByName('val1')[0].value;
            var val2 = document.getElementsByName('val2')[0].value;
            var sum = +val1 + +val2;
           document.getElementsByName('total')[0].value = sum;
          }  
    </script>
    
    <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>
    
    点赞 评论
  • dqt83336
    dqt83336 2019-05-07 06:35

    You are using HTML DOM getElementById() Method, so you should assign an Id to your input total in order to resolve the issue:

    <input type="hidden" name="total" id="total" value="">
    
    点赞 评论
  • duanjian7617
    duanjian7617 2019-05-07 06:43

    You can do with click on button to sum of two input value OR with use of onblur events also

                    <script type="text/javascript">
                    function sum(){
                      var val_1 = document.getElementById('val1').value;
                      var val_2 = document.getElementById('val2').value;
                      var sum = Number(val_1) + Number(val_2);
                      document.getElementById('total').value = sum;
                    }
                    </script>
    
                    <input type="text" id="val1" onblur="sum()"><br><br>
                    <input type="text" id="val2" onblur="sum()"><br><br>
                    <input id="total" value=""><br><br>
                    <button type="button" onclick="sum()" name="btn">Add</button>
    
    点赞 评论
  • dongqin1819
    dongqin1819 2019-05-07 06:53

    You should use id attribute to get the input value which you are referencing in your code with getElementById().

    and You also have to convert the string value to number to perform the arithmetic operation because when we get value from inputs it will a string value

    for convert string to number you can use + sign like in code

    <!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;
          document.getElementById('total').value = val1+val2;
        }     
      </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" id="total" value=""><br><br>
        <button type="button" onclick="sum()" name="btn">Add</button>
    
      </body>
    </html>
    
    点赞 评论

相关推荐