Show average banknote result with Javascript

Question

So I have this code here and I have a difficulty, I would like to calculate the average of the notes that are placed in the input fields. If you can help.

    <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>

Answer 1

you are adding up the GIFT elements and not your values.

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>

Answer 2

First assign an id to the input so that you show the calculation result.

Second change your calculation function to convert all values in the input to Float and instead of returning the value, assign it to the input with id assigned in the first step.

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>

Answer 3

I know there is already an accepted answer, but here is a version that is flexible and does not take into account the number of students. That is, expandable/flexible.

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;
}

Example: https://jsfiddle.net/uv4v0sqf/