Automatic calculation of averages using JAVASCRIPT or PHP

1

<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 publishing online guidelines, and there is a need to calculate the media , however, of this media must be automatically , but for this the teacher must insert a formula that will be saved and used for automatic calculation of student averages whenever he accesses the system to change some note or insert notes ! just like in Excel.

Can anyone give a tip or show a way to solve this problem?

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

    
asked by anonymous 29.04.2017 / 14:58

1 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>
    
29.04.2017 / 16:25