HTML is unable to get Javascript output

Asked

Viewed 69 times

-1

I’m not managing to generate the number of students approved and flunked after placing grades. Where I went wrong?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="/_js/script.js"></script>
    <title>Document</title>
</head>
<script>
    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;
        var aprovados = document.getElementById("aprovados")
        var reprovados = document.getElementById("reprovados")
        
        

        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++;
        }
    }
    
    aprovados.innerHTML = "<div class='text-danger'>" + aprovados + "</div>";
    
    reprovados.innerHTML = "<div class='text-danger'>" + reprovados + "</div>";

    </script>
</head>
<body>

        <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> 5 </td>
            </tr>
             <tr>
                <td>Alunos Aprovados</td>
                <td> <div id="aprovados"></div></td>
            </tr>
             <tr>
                <td>Alunos Reprovados</td>
                <td> <div id="reprovados"></div> </td>
            </tr>
             <tr>
                <td>Media dos Alunos</td>
                <td></td>
            </tr>
            </tbody>
        
        </table>
        </div>

</body>
</html>a

javascript html

  • Duplicate: https://answall.com/q/412221/8063

1 answer

1

First, you cannot use the name "approved" and "disapproved" for two different variables. Use approved counter and disapprove_counter for counters.

For you to retrieve approved and disapproved variables outside the function, you cannot redeclare them within the function scope.

Take the "var" out of the front of the approved and failed variable when you set them within the function. This way, you will be using the global variables you defined outside the function, instead of limiting these two variables to the scope of the function.

var aprovados_contador = 0, reprovados_contador = 0;
var aprovados, reprovados;

 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;
        aprovados = document.getElementById("aprovados") // Alteração nessa linha
        reprovados = document.getElementById("reprovados") // Alteração nessa linha



        if(calculo >= 70)
        {
            media.innerHTML = "<div class='text-success'>" + calculo + "</div>";
            resultado.innerHTML = "Aprovado";
            aprovados_contador++;

        }
        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_contador++;
        }
    }

aprovados.innerHTML = "<div class='text-danger'>" + aprovados_contador + "</div>";
reprovados.innerHTML = "<div class='text-danger'>" + reprovados_contador + "</div>";

  • I made the changes and even then there is no amount of approved or failed students

  • I made a change in my explanation, try to do as it is now and see if it works.

  • it’s still not working, but thanks for trying to help.. I don’t even know what I do anymore for this train to run kkk

Browser other questions tagged javascript html

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