Automatic calculation of averages using JAVASCRIPT or PHP

Question

<script>
var campo1 = document.getElementById("val1");
var campo2 = document.getElementById("val2");
var campo3 = document.getElementById("val3");
var operador = document.getElementById("operador");
var resultado = document.getElementById("resultado");
var somenteNumeros = new RegExp("[^0-9]", "g");

var toNumber = function (value) {
  var number = value.replace(somenteNumeros, "");    
  number = parseInt(number);    
  if (isNaN(number)) 
    number = 0;
  return number;
}

var somenteNumeros = function (event) {
  event.target.value = toNumber(event.target.value);
}

var onInput = function (event) {
  var num1 = toNumber(campo1.value);
  var num2 = toNumber(campo2.value);
  var num3 = toNumber(campo3.value);
  var calc = num1 + " " + operador.value + " " + num2
  //var med = ((num1+num2)/2)*0.6 + (num3*0.4);  
  resultado.textContent = calc + " = " + eval(calc);
  resultado.textContent = " = " + eval(med);
}

campo1.addEventListener("input", somenteNumeros);
campo2.addEventListener("input", somenteNumeros);

campo1.addEventListener("input", onInput);
campo2.addEventListener("input", onInput);
operador.addEventListener("input", onInput);

onInput();
</script>

<table>
	<thead>
		<tr>
			<th>Teste1 </th>
			<th>Teste2 </th>
			<th>Trabalho</th>
			<th>Media</th>
			<th>Med.Final</th>
		</tr>
	</thead>
	<tbody>
			<tr>
			<td><input class='teste1' id='val1' type='number' name='teste1'  size='1' maxlength='2' max='20' min='0'></td>
			<td><input class='teste2' id='val2' type='number' name='teste2'   size='1' maxlength='2' max='20' min='0'></td>
			<td><input class='trab' id='val3' type='number'  name='trabalho'  size='1' maxlength='2' max='20' min='0'></td>
			<td><input class='med' type='number'  name='media'  size='1' maxlength='2' max='20' min='0' readonly='readonly'></td>
			<td><input class='medFinal' type='number' name='medFinal'  size='1' maxlength='20' max='5' min='0' readonly='readonly'></td>
			</tr>
	<tbody>
</table>			

<select id="operador">
  <option value="+" selected>+</option>
  <option value="-">-</option>
  <option value="*">*</option>
  <option value="/">/</option>
  <option value="%">%</option>
</select>
<span id="resultado"></span>

I’m building a web system for the publication of tariffs online, and there is a need to average, however, the calculation of this media should be automatically, but for this the teacher must insert a formula that will be saved and used for the automatic calculation of students' averages whenever he access the system to change some grade or insert notes! as in Excel.

Can someone give a hint or show a way to solve this problem?

with the example works partially, problem is: it is not only a teacher, are various, and each has its formula for calculating measures, The logic would be to store these formulas in such a way that when each teacher has access to the media system is calculated based on his formula, I do not know if there is another idea...

Answer 1

Suggestion:

var linhas = [].slice.call(document.querySelectorAll('tr'));
linhas.forEach(function(linha) {
  var inputs = [].slice.call(linha.querySelectorAll('input'));
  var mediaFinal = inputs.pop();
  var media = inputs.pop();
  linha.addEventListener('input', function() {
    var total = inputs.reduce(function(soma, input) {
      return soma + Number(input.value);
    }, 0);
    media.value = (total / inputs.length).toFixed(2);
    mediaFinal.value = (total / inputs.length * 0.5).toFixed(2);
  });
});

table {
  width: 100%;
  text-align: center;
}

table input {
  width: 80%;
}

table td,
table th {
  width: 20%
}

<table>
  <thead>
    <tr>
      <th>Teste1 </th>
      <th>Teste2 </th>
      <th>Trabalho</th>
      <th>Media</th>
      <th>Med.Final</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input class='teste1' type='number' name='teste1' max='20' min='0'></td>
      <td><input class='teste2' type='number' name='teste2' max='20' min='0'></td>
      <td><input class='trab' type='number' name='trabalho' max='20' min='0'></td>
      <td><input class='med' type='number' name='media' max='20' min='0' readonly='readonly'></td>
      <td><input class='medFinal' type='number' name='medFinal' max='5' min='0' readonly='readonly'></td>
    </tr>
    <tbody>
</table>