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.