Make the Average in Javascript

2

I have a table that per line is performing a calculation and putting the result in the results column. The goal is that now at the end in three cubes appear averages depending on the results obtained and do not know how to call those results.

See this code:

<body>
  <div class="container">
     <div class="row">
        <form class="col s12" method="POST">
           <?php
              if ($error) {
                  echo '<div class="errorWrap"><strong>ERROR</strong> : ' . htmlentities($error) . '</div>';
              } else if ($msg) {
                  echo '<div class="succWrap"><strong>SUCESSO</strong>:' . htmlentities($msg) . '</div>';
              } ?>
           <div class="input-field col s6">
              <input id = "AvalExpec" type = "tel" class = "validate" name = "AvalExpec">
              <label for="avalexp" class="active">Adicionar Avaliação Expectativas</label>
           </div>
           <table id="example" class="striped">
              <thead>
                 <tr>
                    <th>Objetivos</th>
                    <th>
                       <center>Data Inicial </center>
                    </th>
                    <th>
                       <center>Data Final </center>
                    </th>
                    <th>Avaliação Inicial</th>
                    <th>
                       <center>Meta </center>
                    </th>
                    <th>Avaliação Intercalar</th>
                    <th>Avaliação Final</th>
                    <th>Resultado (%)</th>
                 </tr>
              </thead>
              <tbody>
                 <tr>
                    <th>Objetivo 1</th>
                    <th>
                       <div class="input-field col s12">
                          <input id="DataInicio" type = "date" class = "datepicker" name = "DataInicio" />
                          <label for="datainicio"></label>
                       </div>
                    </th>
                    <th>
                       <div class="input-field col s12">
                          <input id="DataFim" type = "date" class = "datepicker" name = "DataFim" />
                          <label for="datafim"></label>
                       </div>
                    </th>
                    <th>
                       <div class="input-field col s12">
                          <input id="avInicial1" type="text" class="validate"
                             autocomplete="off" name="AvInicial"
                             onchange="calculaResultado(1)">
                          <label for="avinicial"></label>
                       </div>
                    </th>
                    <th>
                       <div class="input-field col s12">
                          <input id="meta1" type="text" class="validate" autocomplete="off"
                             name="Meta" onchange="calculaResultado(1)">
                          <label for="meta"></label>
                       </div>
                    </th>
                    <th>
                       <div class="input-field col s12">
                          <input id="AvIntercalar" type="text" class="validate"
                             autocomplete="off" name="AvIntercalar">
                          <label for="avintercalar"></label>
                       </div>
                    </th>
                    <th>
                       <div class="input-field col s12">
                          <input id="avFinal1" type="text" class="validate"
                             autocomplete="off" name="Avfinal" onchange="calculaResultado(1)">
                          <label for="avfinal"></label>       
                       </div>
                    </th>
                    <th>
                       <div class="input-field col s12">
                          <input disabled id="resultado1" name="ResultadoUni" />
                          <label for="resultadouni"></label>  
                       </div>
                    </th>
                 </tr>
                 <tr>
                    <th>Objetivo 2</th>
                    <th>
                       <div class="input-field col s12">
                          <input id="DataInicio" type = "date" class = "datepicker" name = "DataInicio" />
                          <label for="datainicio"></label>
                       </div>
                    </th>
                    <th>
                       <div class="input-field col s12">
                          <input id="DataFim" type = "date" class = "datepicker" name = "DataFim" />
                          <label for="datafim"></label>
                       </div>
                    </th>
                    <th>
                       <div class="input-field col s12">
                          <input id="avInicial2" type="text" class="validate"
                             autocomplete="off" name="AvInicial"
                             onchange="calculaResultado(2)">
                          <label for="avinicial"></label>
                       </div>
                    </th>
                    <th>
                       <div class="input-field col s12">
                          <input id="meta2" type="text" class="validate" autocomplete="off"
                             name="Meta" onchange="calculaResultado(2)">
                          <label for="meta"></label>
                       </div>
                    </th>
                    <th>
                       <div class="input-field col s12">
                          <input id="AvIntercalar" type="text" class="validate"
                             autocomplete="off" name="AvIntercalar">
                          <label for="avintercalar"></label>
                       </div>
                    </th>
                    <th>
                       <div class="input-field col s12">
                          <input id="avFinal2" type="text" class="validate"
                             autocomplete="off" name="Avfinal" onchange="calculaResultado(2)">
                          <label for="avfinal"></label> 
                       </div>
                    </th>
                    <th>
                       <div class="input-field col s12">
                          <input disabled id="resultado2"/>
                       </div>
                    </th>
                 </tr>
                 <tr>
                    <th>Objetivo 3</th>
                    <th>
                       <div class="input-field col s12">
                          <input id="DataInicio" type = "date" class = "datepicker" name = "DataInicio" />
                          <label for="datainicio"></label>
                       </div>
                    </th>
                    <th>
                       <div class="input-field col s12">
                          <input id="DataFim" type = "date" class = "datepicker" name = "DataFim" />
                          <label for="datafim"></label>
                       </div>
                    </th>
                    <th>
                       <div class="input-field col s12">
                          <input id="avInicial3" type="text" class="validate"
                             autocomplete="off" name="AvInicial"
                             onchange="calculaResultado(3)">
                          <label for="avinicial"></label>
                       </div>
                    </th>
                    <th>
                       <div class="input-field col s12">
                          <input id="meta3" type="text" class="validate" autocomplete="off"
                             name="Meta" onchange="calculaResultado(3)">
                          <label for="meta"></label>
                       </div>
                    </th>
                    <th>
                       <div class="input-field col s12">
                          <input id="AvIntercalar" type="text" class="validate"
                             autocomplete="off" name="AvIntercalar">
                          <label for="avintercalar"></label>
                       </div>
                    </th>
                    <th>
                       <div class="input-field col s12">
                          <input id="avFinal3" type="text" class="validate"
                             autocomplete="off" name="Avfinal" onchange="calculaResultado(3)">
                          <label for="avfinal"></label> 
                       </div>
                    </th>
                    <th>
                       <div class="input-field col s12">
                          <input disabled id="resultado3"/>
                       </div>
                    </th>
                 </tr>
                 <tr>
                    <th>Objetivo 4</th>
                    <th>
                       <input id="DataInicio" type = "date" class = "datepicker" name = "DataInicio" />
                       <label for="datainicio"></label>
                    </th>
                    <th>
                       <div class="input-field col s12">
                          <input id="DataFim" type = "date" class = "datepicker" name = "DataFim" />
                          <label for="datafim"></label>
                       </div>
                    </th>
                    <th>
                       <div class="input-field col s12">
                          <input id="avInicial4" type="text" class="validate"
                             autocomplete="off" name="AvInicial"
                             onchange="calculaResultado(4)">
                          <label for="avinicial"></label>
                       </div>
                    </th>
                    <th>
                       <div class="input-field col s12">
                          <input id="meta4" type="text" class="validate" autocomplete="off"
                             name="Meta" onchange="calculaResultado(4)">
                          <label for="meta"></label>
                       </div>
                    </th>
                    <th>
                       <div class="input-field col s12">
                          <input id="AvIntercalar" type="text" class="validate"
                             autocomplete="off" name="AvIntercalar">
                          <label for="avintercalar"></label>
                       </div>
                    </th>
                    <th>
                       <div class="input-field col s12">
                          <input id="avFinal4" type="text" class="validate"
                             autocomplete="off" name="Avfinal" onchange="calculaResultado(4)">
                          <label for="avfinal"></label> 
                       </div>
                    </th>
                    <th>
                       <div class="input-field col s12">
                          <input disabled id="resultado4"/>
                       </div>
                    </th>
                 </tr>
                 <tr>
                    <th>Objetivo 5</th>
                    <th>
                       <div class="input-field col s12">
                          <input id="DataInicio" type = "date" class = "datepicker" name = "DataInicio" />
                          <label for="datainicio"></label>
                       </div>
                    </th>
                    <th>
                       <div class="input-field col s12">
                          <input id="DataFim" type = "date" class = "datepicker" name = "DataFim" />
                          <label for="datafim"></label>
                       </div>
                    </th>
                    <th>
                       <div class="input-field col s12">
                          <input id="avInicial5" type="text" class="validate"
                             autocomplete="off" name="AvInicial"
                             onchange="calculaResultado(5)">
                          <label for="avinicial"></label>
                       </div>
                    </th>
                    <th>
                       <div class="input-field col s12">
                          <input id="meta5" type="text" class="validate" autocomplete="off"
                             name="Meta" onchange="calculaResultado(5)">
                          <label for="meta"></label>
                       </div>
                    </th>
                    <th>
                       <div class="input-field col s12">
                          <input id="AvIntercalar" type="text" class="validate"
                             autocomplete="off" name="AvIntercalar">
                          <label for="avintercalar"></label>
                       </div>
                    </th>
                    <th>
                       <div class="input-field col s12">
                          <input id="avFinal5" type="text" class="validate"
                             autocomplete="off" name="Avfinal" onchange="calculaResultado(5)">
                          <label for="avfinal"></label> 
                       </div>
                    </th>
                    <th>
                       <div class="input-field col s12">
                          <input disabled id="resultado5"/>
                       </div>
                    </th>
                 </tr>
                 <tr>
                    <th>Objetivo 6</th>
                    <th>
                       <div class="input-field col s12">
                          <input id="DataInicio" type = "date" class = "datepicker" name = "DataInicio" />
                          <label for="datainicio"></label>
                       </div>
                    </th>
                    <th>
                       <input id="DataFim" type = "date" class = "datepicker" name = "DataFim" />
                       <label for="datafim"></label>
                    </th>
                    <th>
                       <div class="input-field col s12">
                          <input id="avInicial2" type="text" class="validate"
                             autocomplete="off" name="AvInicial"
                             onchange="calculaResultado(6)">
                          <label for="avinicial"></label>
                       </div>
                    </th>
                    <th>
                       <div class="input-field col s12">
                          <input id="meta2" type="text" class="validate" autocomplete="off"
                             name="Meta" onchange="calculaResultado(6)">
                          <label for="meta"></label>
                       </div>
                    </th>
                    <th>
                       <div class="input-field col s12">
                          <input id="AvIntercalar" type="text" class="validate"
                             autocomplete="off" name="AvIntercalar">
                          <label for="avintercalar"></label>
                       </div>
                    </th>
                    <th>
                       <div class="input-field col s12">
                          <input id="avFinal6" type="text" class="validate"
                             autocomplete="off" name="Avfinal" onchange="calculaResultado(6)">
                          <label for="avfinal"></label> 
                       </div>
                    </th>
                    <th>
                       <div class="input-field col s12">
                          <input disabled id="resultado6"/>
                       </div>
                    </th>
                 </tr>
                 <tr>
                    <th>Objetivo 7</th>
                    <th>
                       <div class="input-field col s12">
                          <input id="DataInicio" type = "date" class = "datepicker" name = "DataInicio" />
                          <label for="datainicio"></label>
                       </div>
                    </th>
                    <th>
                       <div class="input-field col s12">
                          <input id="DataFim" type = "date" class = "datepicker" name = "DataFim" />
                          <label for="datafim"></label>
                       </div>
                    </th>
                    <th>
                       <div class="input-field col s12">
                          <input id="avInicial2" type="text" class="validate"
                             autocomplete="off" name="AvInicial"
                             onchange="calculaResultado(7)">
                          <label for="avinicial"></label>
                       </div>
                    </th>
                    <th>
                       <div class="input-field col s12">
                          <input id="meta2" type="text" class="validate" autocomplete="off"
                             name="Meta" onchange="calculaResultado(7)">
                          <label for="meta"></label>
                       </div>
                    </th>
                    <th>
                       <div class="input-field col s12">
                          <input id="AvIntercalar" type="text" class="validate"
                             autocomplete="off" name="AvIntercalar">
                          <label for="avintercalar"></label>
                       </div>
                    </th>
                    <th>
                       <div class="input-field col s12">
                          <input id="avFinal7" type="text" class="validate"
                             autocomplete="off" name="Avfinal" onchange="calculaResultado(7)">
                          <label for="avfinal"></label> 
                       </div>
                    </th>
                    <th>
                       <div class="input-field col s12">
                          <input disabled id="resultado7"/>
                       </div>
                    </th>
                 </tr>
              </tbody>
           </table>
           <div class="row">
              <div class="col s12 m3">
                 <div class="card-panel teal #263238 blue-grey darken-4" class="center-align">
                    <input disabled id="ConcretizaObj"/>
                 </div>
              </div>
              <div class="col s12 m3 ">
                 <div class="card-panel teal #263238 blue-grey darken-4" class="center-align">
                    <input disabled id="ObjDefinidos"/>
                 </div>
              </div>
              <div class="col s12 m3 ">
                 <div class="card-panel teal #263238 blue-grey darken-4" class="center-align">
                    <input disabled id="ObjAtingidos"/>
                 </div>
              </div>
              <div class="col s12 m3 ">
                 <div class="card-panel teal #263238 blue-grey darken-4" class="center-align">
                    <input disabled id="TotalAlcancados"/>
                 </div>
              </div>
           </div>
           <center><input type="submit" value="Submeter"
              onclick="javascript: location.href='pii.php';"
              class="btn #ff7043 deep-orange lighten-1"/></center>
     </div>
     </form>
  </div>
  </div>
  </main>
  <div class="left-sidebar-hover"></div>
  <script>
     function calculaResultado(x){        
         console.log(x);
         a = document.getElementById('avInicial' + x).value;
         b = document.getElementById('meta' + x).value;
         c = document.getElementById('avFinal' + x).value;

         let resultado = ((c*100)/b);

         if(b === c){
             resultado = 100; //100%
         } else if (a > c) {
             resultado = 0; // 0%
         } else {
             resultado = parseInt(resultado);
         }

         document.getElementById('resultado' + x).value =  resultado; 
     }

     function {
         console.log(x)
         resultados = document.getElementById('resultado' + x).value;

         let media = 
     }
  </script>

Basically the result for now looks like this:

What I intend is that in the four dark boxes in the background, the first one will appear in the averages of the values obtained in the results column.

    
asked by anonymous 28.05.2018 / 13:18

1 answer

1

So that in the first box you can see the averages of the values obtained in the columns of the results. Create the following function:

function calculaMediaFinal () {
    var soma = 0;
    for(var i = 1; i <= 7; i++) { 
        soma += parseInt(document.getElementById('resultado' + i).value, 10); 
    }
    var media = soma / 7;

    var inputCuboMedia = document.getElementById('ConcretizaObj');
    //se sua regra de negócio permitir casas decimais use por exemplo media.toFixed(2); ao invés de parseInt
    inputCuboMedia.value = parseInt(media, 10);
}

and call it at the end of the calculated function:

function calculaResultado(x){        
        //[...código da função calculaResultado...]

        //na última linha dessa função chame 
        calculaMediaFinal();        
     }
    
29.05.2018 / 03:40