Automatic sum field in JavaScript

Question

How to automatically sum some text field without clicking button for sum it?

<tbody>
  <tr>
    <td>
      <div class="form-group">
        <label for="exampleFormControlTextarea1">result
          <a href="JavaScript:value();" class="badge badge-primary">SUM</a>
        </label>
        <input type="text" class="form-control" id="add" name="sum4" readonly>
     </div>
   </td>    
 </tr>
 <tr>
   <td>
    <div class="form-group">
     <label for="exampleFormControlTextarea1">Nilai Akhir/100</label>
      <input type="text" class="form-control" id="addme" name="result4" readonly>
    </div>
  </td>
 </tr>
</tbody>

and this is the JavaScript.

function value()
{
    var input1 = document.getElementById("totalindex1").value;
    var input2 = document.getElementById("totalindex2").value;
    var input3 = document.getElementById("totalindex3").value;
    var result = 0;
    var divider = 100;
    var resdiv = 0;
    result += parseInt(input1) + parseInt(input2) + parseInt(input3);
    resdiv = result / divider;
    document.getElementById('add').value = result;
    document.getElementById('addme').value = resdiv;
}

the variable "totalindex1", "totalindex2", and "totalindex3" already automatically sum for every button checked. I want to make sum for each totalindex as final result without clicking button for sum these variable.

Call value() in whatever place generates the content of the totalindexX elements. — Andreas
– Andreas, Commented Aug 5, 2020 at 15:46

Jannes Carpentier · Accepted Answer · 2020-08-06 12:21:45Z

2

Use the input event on every <input> tag

This event is fired every time the value of the <input> element changes.

You can get all the desired <input> tags by adding a common class name

Example:

function calcsum() {
  let sum = 0;
  for (const inputEl of document.getElementsByClassName("suminput")) {
    sum += +inputEl.value;
  }
  document.getElementById("sum").innerText = sum;
}

<input class="suminput" oninput="calcsum()" />
<input class="suminput" oninput="calcsum()" />
<input class="suminput" oninput="calcsum()" />
<div>Sum: <span id="sum"></span></div>
<br />
<div>The following input will not add to the sum</div>
<input />

edited Aug 6, 2020 at 12:21

answered Aug 5, 2020 at 15:46

Jannes Carpentier

2,0081 gold badge7 silver badges12 bronze badges

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

4 Comments

Dox The augbey Over a year ago

thanks for answer, if use getelementbytagname('input'), there is somany tag with 'input'. can i use getelementbyclassname instead of tagname ?

Jannes Carpentier Over a year ago

Yes you can. getElementsByClassName will get all elements with given class

Dox The augbey Over a year ago

but i have three different input as below : input1, input2 and input3. if use same class name for this input, your code can cover these variable ? and in input field is not fill manually by typing the value, the input value is sum automatically by radio button checked.

Jannes Carpentier Over a year ago

Yes you can. I changed my example to using classes, and I added a 4th input to show that whatever you put in there doesn't get added to the sum

Sascha A. · Accepted Answer · 2020-08-05 15:51:41Z

1

Create an eventlistener for all inputfields vor sum which calls your value-function.

for (let i=1; i<=3; i++) {
    document.getElementById("totalindex"+i).addEventListener('input', value);
}

answered Aug 5, 2020 at 15:51

Sascha A.

4,6463 gold badges17 silver badges34 bronze badges

Collectives™ on Stack Overflow

Automatic sum field in JavaScript

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related