Print the counter result

Asked

Viewed 55 times

-3

Good afternoon.. Ta all working just so that I am not able to put the value of approved student accountants or not. anyone help me please.. I want to add the values there at the end of the html in the part:

td Failed Students /td

td HERE HAD TO COME OUT THE VALUE OF THE FAILED COUNTER /td>

    var aprovados = 0, reprovados = 0;
    function calcula_media(i)
    {
        var n1 = document.getElementById("n1_aluno_" + i).value;
        var n2 = document.getElementById("n2_aluno_" + i).value;
        var media = document.getElementById("media_aluno_" + i);
        var resultado = document.getElementById("resultado_aluno_" + i);
        var calculo = (parseFloat(n1) + parseFloat(n2)) / 2;
        
        

        if(calculo >= 70)
        {
            media.innerHTML = "<div class='text-success'>" + calculo + "</div>";
            resultado.innerHTML = "Aprovado";
            aprovados++;
            
        }
        else if(calculo >=30)
        {
            media.innerHTML = "<div class='text-rec'>" + calculo + "</div>";
            resultado.innerHTML = "Recuperaçao";
            
        }
       
        else
        {
            media.innerHTML = "<div class='text-danger'>" + calculo + "</div>";
            resultado.innerHTML = "Reprovado";
            reprovados++;
        }
    }
 <div class="container">
          <h2>Notas Alunos</h2>
          <p>Digite as notas dos alunos e saiba se ele esta Aprovado, Recuperação ou Reprovado</p>
          <table class="table notas">
            <thead>
              <tr>
                <th>Estudante</th>
                <th>N1</th>
                <th>N2</th>
                <th>Média</th>
                <th>Resultado Final</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Stella</td>
                <td><input id="n1_aluno_0" type="number" value="0" min="0.0" step="0.1" max="10.0" onchange="calcula_media(0)"></td>
                <td><input id="n2_aluno_0" type="number" value="0" min="0.0" step="0.1" max="10.0" onchange="calcula_media(0)"></td>
                <td><div id="media_aluno_0"> </div></td>
                <td><div id="resultado_aluno_0">-- </div></td>
              </tr>
              <tr>
                <td>Petronio</td>
                <td><input id="n1_aluno_1" type="number" value="0" min="0.0" step="0.1" max="10.0" onchange="calcula_media(1)"></td>
                <td><input id="n2_aluno_1" type="number" value="0" min="0.0" step="0.1" max="10.0" onchange="calcula_media(1)"></td>
                <td><div id="media_aluno_1"> </div></td>
                <td><div id="resultado_aluno_1">-- </div></td>
              </tr>
              <tr>
                <td>Waldeir</td>
                <td><input id="n1_aluno_2" type="number" value="0" min="0.0" step="0.1" max="10.0" onchange="calcula_media(2)"></td>
                <td><input id="n2_aluno_2" type="number" value="0" min="0.0" step="0.1" max="10.0" onchange="calcula_media(2)"></td>
                <td><div id="media_aluno_2"> </div></td>
                <td><div id="resultado_aluno_2">-- </div></td>
              </tr>
              <tr>
                <td>Arthur</td>
                <td><input id="n1_aluno_3" type="number" value="0" min="0.0" step="0.1" max="10.0" onchange="calcula_media(3)"></td>
                <td><input id="n2_aluno_3" type="number" value="0" min="0.0" step="0.1" max="10.0" onchange="calcula_media(3)"></td>
                <td><div id="media_aluno_3"> </div></td>
                <td><div id="resultado_aluno_3">-- </div></td>
              </tr>
              <tr>
                <td>Jean</td>
                <td><input id="n1_aluno_4" type="number" value="0" min="0.0" step="0.1" max="10.0" onchange="calcula_media(4)"></td>
                <td><input id="n2_aluno_4" type="number" value="0" min="0.0" step="0.1" max="10.0" onchange="calcula_media(4)"></td>
                <td><div id="media_aluno_4"> </div></td>
                <td><div id="resultado_aluno_4">-- </div></td>
              </tr>
            </tbody>

        </table>
        <table class="table resultado">
            <tbody>
        
            <tr>
                <td>Alunos Participantes</td>
                <td></td>
            </tr>
             <tr>
                <td>Alunos Aprovados</td>
                <td> ?????</td>
            </tr>
             <tr>
                <td>Alunos Reprovados</td>
                <td>????? </td>
            </tr>
             <tr>
                <td>Media dos Alunos</td>
                <td></td>
            </tr>
            </tbody>
        
        </table>
        </div>

javascript html
  • 1

    Stella, you did not solve the previous question that you asked before this and that deals with the same subject rs... please read on the page [tour] to know the site systematics. It is quick thing and will help you a lot to know how it works. Abs!

  • That way it became very complicated to count approved and disapproved. Your other question, which didn’t have this complete code, made it easy to suggest counting the values that way, but it really isn’t.

1 answer

0

Add an id to <td> that you want to enter the values, in this example I added the ids "total_approved" and "total_disapproved".

It was necessary to remove the global counters, because with each change in input one more was added to the counters, so I put to redo the calculation to each call, going through the texts that are in the results and comparing whether they are approved or failed.

To display these values, just do as you have done several times before, using the innerHTML to the element you want

function calcula_media(i)
{
  var n1 = document.getElementById("n1_aluno_" + i).value;
  var n2 = document.getElementById("n2_aluno_" + i).value;
  var media = document.getElementById("media_aluno_" + i);
  var resultado = document.getElementById("resultado_aluno_" + i);
  var calculo = (parseFloat(n1) + parseFloat(n2)) / 2;
  var aprovados= 0;
  var reprovados = 0;

  if(calculo >= 70)
  {
    media.innerHTML = "<div class='text-success'>" + calculo + "</div>";
    resultado.innerHTML = "Aprovado";
  }
  else if(calculo >=30)
  {
    media.innerHTML = "<div class='text-rec'>" + calculo + "</div>";
    resultado.innerHTML = "Recuperaçao";        
  }
  else
  {
    media.innerHTML = "<div class='text-danger'>" + calculo + "</div>";
    resultado.innerHTML = "Reprovado";
  }      
  for (var i = 0; i <= 4; i++)
  {
    if(document.getElementById("resultado_aluno_" + i).innerHTML == "Aprovado")
    {
      aprovados ++;
    }
    else if (document.getElementById("resultado_aluno_" + i).innerHTML == "Reprovado")
    {
      reprovados++;
    }
  }
        
  document.getElementById("total_aprovados").innerHTML = aprovados;
  document.getElementById("total_reprovados").innerHTML = reprovados;
}
<div class="container">
  <h2>Notas Alunos</h2>
  <p>Digite as notas dos alunos e saiba se ele esta Aprovado, Recuperação ou Reprovado</p>
  <table class="table notas">
    <thead>
      <tr>
        <th>Estudante</th>
        <th>N1</th>
        <th>N2</th>
        <th>Média</th>
        <th>Resultado Final</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Stella</td>
        <td><input id="n1_aluno_0" type="number" value="0" min="0.0" step="0.1" max="10.0" onchange="calcula_media(0)"></td>
        <td><input id="n2_aluno_0" type="number" value="0" min="0.0" step="0.1" max="10.0" onchange="calcula_media(0)"></td>
        <td><div id="media_aluno_0"> </div></td>
        <td><div id="resultado_aluno_0">-- </div></td>
      </tr>
      <tr>
        <td>Petronio</td>
        <td><input id="n1_aluno_1" type="number" value="0" min="0.0" step="0.1" max="10.0" onchange="calcula_media(1)"></td>
        <td><input id="n2_aluno_1" type="number" value="0" min="0.0" step="0.1" max="10.0" onchange="calcula_media(1)"></td>
        <td><div id="media_aluno_1"> </div></td>
        <td><div id="resultado_aluno_1">-- </div></td>
      </tr>
      <tr>
        <td>Waldeir</td>
        <td><input id="n1_aluno_2" type="number" value="0" min="0.0" step="0.1" max="10.0" onchange="calcula_media(2)"></td>
        <td><input id="n2_aluno_2" type="number" value="0" min="0.0" step="0.1" max="10.0" onchange="calcula_media(2)"></td>
        <td><div id="media_aluno_2"> </div></td>
        <td><div id="resultado_aluno_2">-- </div></td>
      </tr>
      <tr>
        <td>Arthur</td>
        <td><input id="n1_aluno_3" type="number" value="0" min="0.0" step="0.1" max="10.0" onchange="calcula_media(3)"></td>
        <td><input id="n2_aluno_3" type="number" value="0" min="0.0" step="0.1" max="10.0" onchange="calcula_media(3)"></td>
        <td><div id="media_aluno_3"> </div></td>
        <td><div id="resultado_aluno_3">-- </div></td>
      </tr>
      <tr>
        <td>Jean</td>
        <td><input id="n1_aluno_4" type="number" value="0" min="0.0" step="0.1" max="10.0" onchange="calcula_media(4)"></td>
        <td><input id="n2_aluno_4" type="number" value="0" min="0.0" step="0.1" max="10.0" onchange="calcula_media(4)"></td>
        <td><div id="media_aluno_4"> </div></td>
        <td><div id="resultado_aluno_4">-- </div></td>
      </tr>
    </tbody>

  </table>
  <table class="table resultado">
    <tbody>    
      <tr>
        <td>Alunos Participantes</td>
        <td></td>
      </tr>
      <tr>
        <td>Alunos Aprovados</td>
        <td id="total_aprovados"> ?????</td>
      </tr>
      <tr>
        <td>Alunos Reprovados</td>
        <td id="total_reprovados">????? </td>
      </tr>
      <tr>
          <td>Media dos Alunos</td>
          <td></td>
      </tr>
    </tbody>
        
  </table>
</div>

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.