Calculate mean only in the fields typed

5

Hello, I am programming a system in which it calculates the average of some fields. The point is that not always all values will be reported and the average should calculate the fields in which there are values, ie the calculation of the mean will vary according to the fields yesterday has value.

HTML

<form name="formMediasETEs" method="post" action="AdicionarVazao.php">
    <tr class="tabela_dados">
        <td>
            <input name="data" style="text-align:center; width:150px" style="font-size:10px" type="date" id="data" value="" />
        </td>
        <td>
            <input name="oito" type="text" id="oito" onblur="ver()" style="text-align:center; width: 60px" value="" />
        </td>
        <td>
            <input name="nove" type="text" id="nove" style="text-align:center; width: 60px" value="" />
        </td>
        <td>
            <input name="dez" type="text" id="dez" style="text-align:center; width: 60px" value="" />
        </td>
        <td>
            <input name="onze" type="text" id="onze" style="text-align:center; width: 60px" value="" />
        </td>
        <td>
            <input name="doze" type="text" id="doze" style="text-align:center; width: 60px" value="" />
        </td>
        <td>
            <input name="treze" type="text" id="treze" style="text-align:center; width: 60px" value="" />
        </td>
        <td>
            <input name="quatorze" type="text" id="quatorze" style="text-align:center; width: 60px" value="" />
        </td>
        <td>
            <input name="quinze" type="text" id="quinze" style="text-align:center; width: 60px" value="" />
        </td>
        <td>
            <input name="d_seis" type="text" id="d_seis" style="text-align:center; width: 60px" value="" />
        </td>
        <td>
            <input name="d_sete" type="text" id="d_sete" style="text-align:center; width: 60px" value="" />
        </td>
        <td>
            <input name="d_oito" type="text" onblur="calcularMediaQLSETES()" id="d_oito" style="text-align:center; width: 60px" value="" />
        </td>
    </tr>

JavaScript

function calcularMediaQLSETES() {
    var q2 = document.forms['formMediasETEs']['oito'].value;
    var q3 = document.forms['formMediasETEs']['nove'].value;
    var q4 = document.forms['formMediasETEs']['dez'].value;
    var q5 = document.forms['formMediasETEs']['onze'].value;
    var q23 = document.forms['formMediasETEs']['doze'].value;
    var q6 = document.forms['formMediasETEs']['treze'].value;
    var q7 = document.forms['formMediasETEs']['quatorze'].value;
    var q8 = document.forms['formMediasETEs']['quinze'].value;
    var q9 = document.forms['formMediasETEs']['d_seis'].value;
    var q10 = document.forms['formMediasETEs']['d_sete'].value;
    var q11 = document.forms['formMediasETEs']['d_oito'].value;

    var mqls = (parseFloat(q2) + parseFloat(q3) + parseFloat(q4) +
        parseFloat(q5) + parseFloat(q23) + parseFloat(q6) + parseFloat(q7) +
        parseFloat(q8) + parseFloat(q9) + parseFloat(q10) + parseFloat(q11)) / 11;

    document.forms['formMediasETEs']['mediaQ_ls'].value = mqls.toFixed(2);
}

Thank you!

    
asked by anonymous 20.04.2016 / 14:47

3 answers

4

Follow a POC with jQuery, I think you should help:

HTML:

Nota 1: <input class="nota" /><br/>
Nota 2: <input class="nota" /><br/>
Nota 3: <input class="nota" /><br/><br/>
Media: <input id="media" readonly/>

JQUERY:

$(function(){
    $('.nota').change(function(){
      var total = 0;
      var notas = 0;
      $('.nota').each(function(){
          var nota = new Number(this.value);          
          if(nota === 0) return;          
          total = total + nota;
          notas++;
      })
      $('#media').val(total/notas);
  });
})

See working at jsFiddle .

    
20.04.2016 / 15:08
5

Using only you would only need to get the values of the inputs and verify that they have value. If you have, simply add and increase the amount to be calculated.

It would look like this:

<script>
  function calcularMedia(){
    //Você pode alterar o elemento de acordo com a sua necessidade
    inputs = document.querySelectorAll("input[type=text]");
    var quantidade = 0;
    var total = 0;
    for (i = 0; i < inputs.length; ++i) {
      var valor = parseInt(inputs[i].value);
      if(valor){
            total = total + valor;
            quantidade ++;
      }
  	}
    var media = total / quantidade;
    
    document.getElementById('resultado').innerHTML  = "Media: " + media;
  }
</script>

<input type="text"/><br/>
<input type="text"/><br/>
<input type="text"/><br/>
<input type="text"/><br/>
<input type="text"/><br/>
<input type="text"/><br/>
<input type="text"/><br/>

<button  onclick="calcularMedia()">Calcular</button>

<p id="resultado"></p>
    
20.04.2016 / 15:35
1

I do not advise you to use jQuery just to make this type of calculation simple, unless you already use it for other more complex functions.

function calcularMediaQLSETES()  
{  
  var formMedia = document.forms['formMediasETEs'];
  var total = 12; //numero total de campos
  values = 0;
  for (var i = 1; i <= 12; i++ ){ //começo em 1 porque 0 é a data
     let actual = parseInt(formMedia[i].value);
     if(!actual){
        total--;
        continue;
     }
     values += actual;
  }
  return !alert(values/total);
}
<form name="formMediasETEs" method="post" action="AdicionarVazao.php">
<tr>
    <td><input name="data" style="text-align:center; width:150px" style="font-size:10px" type="date" id="data" value=""/></td>
    <td><input name="oito" type="text" id="oito" onblur="ver()" style="text-align:center; width: 60px" value=""/></td>
    <td><input name="nove" type="text" id="nove" style="text-align:center; width: 60px" value=""/></td>
    <td><input name="dez" type="text" id="dez" style="text-align:center; width: 60px" value=""/></td>
    <td><input name="onze" type="text" id="onze" style="text-align:center; width: 60px" value=""/></td>
    <td><input name="doze" type="text" id="doze" style="text-align:center; width: 60px" value=""/></td>
    <td><input name="treze" type="text" id="treze" style="text-align:center; width: 60px" value=""/></td>
    <td><input name="quatorze" type="text" id="quatorze" style="text-align:center; width: 60px" value=""/></td>
    <td><input name="quinze" type="text" id="quinze" style="text-align:center; width: 60px" value=""/></td>
    <td><input name="d_seis" type="text" id="d_seis" style="text-align:center; width: 60px" value=""/></td>
    <td><input name="d_sete" type="text" id="d_sete" style="text-align:center; width: 60px" value=""/></td>
    <td><input name="d_oito" type="text" onblur="calcularMediaQLSETES()" id="d_oito" style="text-align:center; width: 60px" value=""/></td>
</tr>
<br><br>
<input onClick="calcularMediaQLSETES()" type="button" value="Calcular Media" />
</form>
    
20.04.2016 / 15:36