0

Então estou com este codigo aqui e estou com uma dificuldade, gostaria de calcular a media das notas que são colocadas nos campos inputs. Se puderem ajudar.

    <div class="">
        <p>Media dos alunos</p>

        <form class="" method="post">
            <label>Aluno 01</label>
            <input type="number" id="nota01" value="" max="10">
            <br><br>
            <label>Aluno 02</label>
            <input type="number" id="nota02" value="" max="10">
            <br><br>
            <label>Aluno 03</label>
            <input type="number" id="nota03" value="" max="10">
            <br><br>
            <label>Aluno 04</label>
            <input type="number" id="nota04" value="" max="10">
            <br><br>
            <input type="button" onclick="javascript:calculo();" name="name" value="Enviar">
            <input type="text" name="txtMedia" value="">
        </form>
    </div>

    <script type="text/javascript">
        function calculo() {
            var nota01 = document.getElementById('nota01');
            var nota02 = document.getElementById('nota02');
            var nota03 = document.getElementById('nota03');
            var nota04 = document.getElementById('nota04');

            var resultado = (nota01 + nota02 + nota03 + nota04)/4;

            return resultado;
        }
    </script>
</body>

1

3 Respostas 3

3

você esta somando os elementos DOM e não os seus valores.

var nota01 = document.getElementById('nota01');
var nota02 = document.getElementById('nota02');
var nota03 = document.getElementById('nota03');
var nota04 = document.getElementById('nota04');
var enviar = document.getElementById('enviar');
var txtMedia = document.getElementById('txtMedia');

enviar.addEventListener("click", function (event) {
  var valor01 = nota01.valueAsNumber || 0;
  var valor02 = nota02.valueAsNumber || 0;
  var valor03 = nota03.valueAsNumber || 0;
  var valor04 = nota04.valueAsNumber || 0;

  txtMedia.value = (valor01 + valor02 + valor03 + valor04)/4;
});
<div class="">
  <p>Media dos alunos</p>
  <form class="" method="post">
    <p>
      <label>Aluno 01
        <input type="number" id="nota01" value="" max="10">
      </label>
    </p>
    <p>
      <label>Aluno 02
        <input type="number" id="nota02" value="" max="10">
      </label>
    </p>
    <p>
      <label>Aluno 03
        <input type="number" id="nota03" value="" max="10">
      </label>
    </p>
    <p>
      <label>Aluno 04
        <input type="number" id="nota04" value="" max="10">
      </label>
    </p>
    <p>
      <input type="button" id="enviar" value="Enviar">
      <input type="text" id="txtMedia" value="" readonly>
    </p>
  </form>
</div>

3
  • Não seria interessante usar o parseFloat? Tendo em vista que notas podem ser quebradas? Commented 7/04/2016 às 19:27
  • @RafaelWithoeft tem razão, inclusive estava editando a resposta. Commented 7/04/2016 às 19:29
  • @RafaelWithoeft, lembrei do valueAsNumber, me parece mais apropriado. Commented 7/04/2016 às 19:32
0

Primeiro atribua um id para o input para que você mostre o resultado do cálculo.

Segundo altere sua função calculo para que converta todos os valores no input para Float e ao invés de retornar o valor, faça a atribuição do mesmo para o input com id atribuido no primeiro passo.

function calculo() {
  var nota01 = parseFloat(document.getElementById('nota01').value);
  var nota02 = parseFloat(document.getElementById('nota02').value);
  var nota03 = parseFloat(document.getElementById('nota03').value);
  var nota04 = parseFloat(document.getElementById('nota04').value);

  var resultado = parseFloat((nota01 + nota02 + nota03 + nota04) / 4);


  document.getElementById('txtResultado').setAttribute("value", resultado);
}
<p>Media dos alunos</p>

<form class="" method="post">
  <label>Aluno 01</label>
  <input type="number" id="nota01" value="" max="10">
  <br>
  <br>
  <label>Aluno 02</label>
  <input type="number" id="nota02" value="" max="10">
  <br>
  <br>
  <label>Aluno 03</label>
  <input type="number" id="nota03" value="" max="10">
  <br>
  <br>
  <label>Aluno 04</label>
  <input type="number" id="nota04" value="" max="10">
  <br>
  <br>
  <input type="button" onclick="javascript:calculo();" name="name" value="Enviar">
  <input type="text" id="txtResultado" value="">
</form>

0

Sei que já há uma resposta aceite, mas aqui fica uma versão que é flexivel e não leva em conta o numero de alunos. Ou seja, expansível/flexivel.

function calculo() {
  // selecionar todos os inputs com ID começada por "nota0"
  var inputs = [].filter.call(document.querySelectorAll('form input[id]'), function(input) {
    return input.id.indexOf('nota0') == 0;
  });

  // somar o valor de todos os inputs e dividir pelo numero de inputs
  var media = inputs.reduce(function(soma, input) {
    return soma + parseFloat(input.value || 0);
  }, 0) / inputs.length;

  // mostrar o resultado
  document.querySelector('input[name="txtMedia"]').value = media;
}

Exemplo: https://jsfiddle.net/uv4v0sqf/

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 .