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>

Estou a construir um sistema web para publicação de pautas online, e existe uma necessidade de se calcular a media, porém, o calculo dessa media deve ser de forma automática, mas para isso o docente deve inserir uma fórmula que será guardada e usada para o cálculo automático das médias dos alunos sempre que ele acessar o sistema para alterar alguma nota ou inserir notas! tal como acontece no Excel.

Alguém pode dar uma dica ou mostrar um caminho para resolver esse problema?

com o exemplo funciona parcialmente, problema é: não é apenas um docente, são varios, e cada um tem a sua formula para calculo de medias, O logico seria armazenar essas formulas de tal forma que quando cada docente tiver acesso ao sistema a media seja calculada com base na sua formula, Não sei se existe uma outra ideia...

0

1 Resposta 1

1

Sugestão:

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>

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .