Show note average result with Javascript

Question

Show note average result with Javascript

Navigation

#1 by (3 votes)
#2 by (0 votes)
#3 by (0 votes)

0

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 inputs fields. If they 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>

javascript html

asked by anonymous 07.04.2016 / 21:11

3 answers

3

You are adding DOM elements and not their 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>

07.04.2016 / 21:22

0

I know that 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: link

07.04.2016 / 22:50

Asp.NET + PagSeguro Error when using Bootstrap Glyphicons

score 0 · Accepted Answer

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

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>