How to Add Two Input Values And Show In The Third Input Box ?? with simple JavaScript like this help me where i was wrong [duplicate]

Question

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.

correct it like this <input type="text" name="val1" id="val1"><br><br> — augustine jenin
– augustine jenin, Commented May 7, 2019 at 6:33

Mamun · Accepted Answer · 2019-05-07 06:36:06Z

0

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>

answered May 7, 2019 at 6:36

Mamun

69k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

samad Over a year ago

It works. I forgot to Add IDs To HTML Elements, Thanks.

fmsthird · Accepted Answer · 2019-05-07 06:35:36Z

0

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

answered May 7, 2019 at 6:35

fmsthird

1,8833 gold badges19 silver badges36 bronze badges

Comments

Radonirina Maminiaina · Accepted Answer · 2019-05-07 06:39:41Z

0

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>

edited May 7, 2019 at 6:39

answered May 7, 2019 at 6:33

Radonirina Maminiaina

7,0144 gold badges36 silver badges63 bronze badges

1 Comment

samad Over a year ago

Thanks For Explanation, I Forget To Add IDs

Ghanshyam Nakiya · Accepted Answer · 2019-05-07 06:43:19Z

0

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>

answered May 7, 2019 at 6:43

Ghanshyam Nakiya

1,71221 silver badges24 bronze badges

2 Comments

samad Over a year ago

It works. I forgot to Add IDs To HTML Elements, Thanks and iam also searching for onblur event thanks for extra information

Ghanshyam Nakiya Over a year ago

@samad Yes definitely help onblur events, and Your Welcome...

Hafiz Shehroz · Accepted Answer · 2019-05-07 06:53:51Z

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>

Rahul · Accepted Answer · 2019-05-07 07:05:30Z

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>

I get a lot of confusions but you clear my conclusions by comparing getElementsByName and getElementById , Thanks

SAVe · Accepted Answer · 2019-05-07 07:12:44Z

0

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>

edited May 7, 2019 at 7:12

answered May 7, 2019 at 6:34

SAVe

8126 silver badges22 bronze badges

3 Comments

SAVe Over a year ago

@KrishnaPrashatt : Please Have look.

samad Over a year ago

It works. I forgot to Add IDs To HTML Elements, Thanks.

Krishna Prashatt Over a year ago

This shouldn't be the accepted answer IMHO. Please refer How to Answer

Collectives™ on Stack Overflow

How to Add Two Input Values And Show In The Third Input Box ?? with simple JavaScript like this help me where i was wrong [duplicate]

7 Answers 7

1 Comment

Comments

1 Comment

2 Comments

Comments

1 Comment

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

1 Comment

2 Comments

Comments

1 Comment

3 Comments

Linked

Related