2
I have a table that by row is performing a calculation and placing the result in the result column. The goal is that now the end in three cubes appear averages according to the results obtained and do not know how to call these results.
Look at 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 is like this:
What I want is that in the 4 dark boxes at the bottom, in the first appear the averages of the values obtained in the results column.
Just as a hint, this is not the place for "urgent help".
– Isac
am html is giant, edit and put only what is relevant to the question, hard to read like this
– Ricardo Pontual