Form Input number onchange

Question

As shown in the code below, I want to change the value of the input "total" to the sum of two inputs dynamically as I click on the button that add value to "val1". I don't want to add this event on the button as onclick, cuz at the end will be several fields that will sum the total and they will change without a button.

Actually I wanted that the value of "total" start with this sum too, I didn't want to input already the value 8.

As sugest by @tallberg, follows bellow:

function addVal(index) {
  if (document.getElementById(index).value < 20) {
    document.getElementById(index).value = Number(document.getElementById(index).value) + 1;
    calcSum();
  }
}

var ValueElements = document.getElementsByClassName('Value');
var TotalElement = document.getElementById('total');
for (var i of ValueElement) {
  i.addEventListener('keyup', calcSum)
}

function calcSum() {
  var sum = 0;
  for (var i of ValueElements) {
    sum += parseInt(i.value) || 0;
  }
  TotalElement.value = sum;
}

<td>
  <input type="number" class="Value" name="VAL1" id="val1" value="8" min="8" max="20" readonly="true">
  <button type="button" id="btAddVal" onclick="addVal('val1');"><img src="img/icons/mais.png"> 
        </button>
</td>
<td><input type="number" class="Value" name="VAL2" id="val2" value="0" readonly="true"></td>
<td><input type="number" name="TOTAL" id="total" readonly="true" value="8"></td>

Answer 1

With the @tallberg answer I made it with the code bellow:

<td>
  <input type="number" class="Value" name="VAL1" id="val1" value="8" min="8" max="20" readonly="true">
  <button type="button" id="btAddVal" onclick="addVal('val1');"><img src="img/icons/mais.png"></button>
</td>
<td><input type="number" class="Value" name="VAL2" id="val2" value="0" readonly="true"></td>
<td><input type="number" name="TOTAL" id="total" readonly="true" value="8"></td>

---

function addVal(index) {
   if (document.getElementById(index).value < 20) {
   document.getElementById(index).value = 
   Number(document.getElementById(index).value) + 1;
   calcSum();
   }
}

var ValueElements = document.getElementsByClassName('Value');
var TotalElement  = document.getElementById('total');
for (var i of ValueElement) {
   i.addEventListener('keyup', calcSum)
}

function calcSum() {
   var sum = 0;
   for (var i of ValueElements) {
   sum += parseInt(i.value) || 0;
   }
document.getElementById('total') = sum;
}

---

I was not getting the var's ValueElements and TotalElement inside the function... so i didn't using them and worked!

Answer 2

You can get all elements by class name and apply a listener that does the calculation.

// get all value inputs
var valueElements = document.getElementsByClassName('value');
// get total sum input
var sumElement = document.getElementById('sum');
// add listeners to all value inputs
for(var val of valueElements) {
  val.addEventListener('input', calcSum); 
}
// add value to element by id
function add(id, value){
  var e = document.getElementById(id);  
  var v = e.value;
  e.value = parseInt(v) ? parseInt(v) + value : value;
  calcSum();
}
// use the array of elements to calculate the sum
function calcSum() {
  var sum = 0;
  for(var val of valueElements) {
    sum += parseInt(val.value) || 0;
  }
  sumElement.value = sum;
}

.value { width: 4em}
#sum { width: 8em}

<div>
<input type="number" id="v1" class="value">+
<input type="number" id="v2" class="value">+
<input type="number" id="v3" class="value">=
<input type="number" id="sum">
</div>
<button type="button" onclick="add('v1',5)">Add 1:st</button>
<button type="button" onclick="add('v2',2)">Add 2:nd</button>
<button type="button" onclick="add('v3',4)">Add 3:rd</button>

Answer 3

normally inputs tags goes with form element; which is more easier to code sum, and don't forget to use output tag:

const myForm = document.getElementById('my-form')
  ;
myForm.Total.value = myForm.VAL1.valueAsNumber   // first attempt..
                   + myForm.VAL2.valueAsNumber
  ;
myForm.oninput=_=>
  {
  myForm.Total.value = myForm.VAL1.valueAsNumber
                     + myForm.VAL2.valueAsNumber
  ;
  }
  
// I use Whitesmiths style, please respect that!

#my-form {
  display : inline-block;
  border : 1px solid grey;
}
#my-form input,
#my-form output {
  display :inline-block;
  width : 7em;
  margin : 1em .7em;
  text-align: right;
  direction: rtl;
}
#my-form output {
  border-bottom: 1px solid blue;
}
#my-form input:invalid {
  border : 1px solid red;
}

<form action="" id="my-form">

  <input type="number" name="VAL1" value="8" min="8" max="20" />
  <input type="number" name="VAL2" value="0" />

  <output name="Total">xx</output>

</form>