grade table

Asked

Viewed 933 times

2

Hello, Good morning, I need to perform an activity "Write an HTML document that simulates a note drop screen in an academic system. I did so, but I’m not able to solve the result column...someone could help me..

<html lang="pt-br">
    <head>
        <title>Prototipo Sistema Academico</title>
        <meta charset="UTF-8">
        <link rel='stylesheet' type='text/css' href='css/bootstrap.min.css'>
        <script src='js/bootstrap.min.js'></script>
        <script>
        function calcula_media(i)
        {
            var N1=document.getElementsByName("n1")[i].value;
            var N2=document.getElementsByName("n2")[i].value;
            var media=document.getElementsByName("media");
            var calculo=(parseFloat(N1)+parseFloat(N2))/2;
            var result=document.getElementsByName("resultado");
            document.getElementsByName("resultado").innerHTML+="aprovado";
            if(calculo >=7)
            {
                media[i].innerHTML="<div class='text-success'>"+calculo+"</div>";


            }
            else
            {
                media[i].innerHTML+="<div class='text-danger'>"+calculo+"</div>";
            }

        }
        </script>
    </head>
    <body>

            <div class="container">
              <h2>Hover Rows</h2>
              <p>The .table-hover class enables a hover state on table rows:</p>
              <table class="table table-hover">
                <thead>
                  <tr>
                    <th>Estudante</th>
                    <th>N1</th>
                    <th>N2</th>
                    <th>Média</th>
                    <th>Resultado Final</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>Ana da Silva</td>
                    <td><input type="number" value="0" min="0.0" step="0.1" max="10.0"name="n1" onchange="calcula_media(0)"></td>
                    <td><input type="number" value="0" min="0.0" step="0.1" max="10.0"name="n2" onchange="calcula_media(0)"></td>
                    <td><div name="media"> </div></td>
                    <td><div name="resultado">-- </div></td>
                  </tr>
                  <tr>
                        <td>Beatriz da Silva Leite</td>
                        <td><input type="number" value="0" min="0.0" step="0.1" max="10.0"name="n1" onchange="calcula_media(1)"></td>
                        <td><input type="number" value="0" min="0.0" step="0.1" max="10.0"name="n2" onchange="calcula_media(1)"></td>
                        <td><div name="media">0,0</div></td>
                        <td><div name="media"> </div></td>
                  </tr>
                  <tr>
                        <td>Breno Silva da Silva</td>
                        <td><input type="number" value="0" min="0.0" step="0.1" max="10.0"name="n1" onchange="calcula_media(2)"></td>
                        <td><input type="number" value="0" min="0.0" step="0.1" max="10.0"name="n2" onchange="calcula_media(2)"></td>
                        <td><div name="media">0,0</div></td>
                        <td><div name="media"> </div></td>
                  </tr>
                  <tr>
                    <td>Carlos da Silva</td>
                    <td><input type="number" value="0" min="0.0" step="0.1" max="10.0"name="n1" onchange="calcula_media(3)"></td>
                    <td><input type="number" value="0" min="0.0" step="0.1" max="10.0"name="n2" onchange="calcula_media(3)"></td>
                    <td><div name="media">0,0</div></td>
                    <td><div name="media"> </div></td>
                  </tr>
                  <tr>
                    <td>Caroline Soares</td>
                    <td><input type="number" value="0" min="0.0" step="0.1" max="10.0"name="n1" onchange="calcula_media(4)"></td>
                    <td><input type="number" value="0" min="0.0" step="0.1" max="10.0"name="n2" onchange="calcula_media(4)"></td>
                    <td><div name="media">0,0</div></td>
                    <td><div name="media"> </div></td>
                  </tr>
                  <tr>
                    <td>Debora Machado</td>
                    <td><input type="number" value="0" min="0.0" step="0.1" max="10.0"name="n1" onchange="calcula_media(5)"></td>
                    <td><input type="number" value="0" min="0.0" step="0.1" max="10.0"name="n2" onchange="calcula_media(5)"></td>
                    <td><div name="media">0,0</div></td>
                    <td><div name="media"> </div></td>
                  </tr>
                  <tr>
                    <td>Daniel Guerrera</td>
                    <td><input type="number" value="0" min="0.0" step="0.1" max="10.0"name="n1" onchange="calcula_media(6)"></td>
                    <td><input type="number" value="0" min="0.0" step="0.1" max="10.0"name="n2" onchange="calcula_media(6)"></td>
                    <td><div name="media">0,0</div></td>
                    <td><div name="media"> </div></td>
                  </tr>
                  <tr>
                    <td>Fabiana Molina</td>
                    <td><input type="number" value="0" min="0.0" step="0.1" max="10.0"name="n1" onchange="calcula_media(7)"></td>
                    <td><input type="number" value="0" min="0.0" step="0.1" max="10.0"name="n2" onchange="calcula_media(7)"></td>
                    <td><div name="media">0,0</div></td>
                    <td><div name="media"> </div></td>
                  </tr>
                  <tr>
                    <td>Helena Garcia</td>
                    <td><input type="number" value="0" min="0.0" step="0.1" max="10.0"name="n1" onchange="calcula_media(8)"></td>
                    <td><input type="number" value="0" min="0.0" step="0.1" max="10.0"name="n2" onchange="calcula_media(8)"></td>
                    <td><div name="media">0,0</div></td>
                    <td><div name="media"> </div></td>
                  </tr>
                  <tr>
                    <td>Galvão Bueno </td>
                    <td><input type="number" value="0" min="0.0" step="0.1" max="10.0"name="n1" onchange="calcula_media(9)"></td>
                    <td><input type="number" value="0" min="0.0" step="0.1" max="10.0"name="n2" onchange="calcula_media(9)"></td>
                    <td><div name="media">0,0</div></td>
                    <td><div name="media"> </div></td>
                  </tr>
                </tbody>
              </table>
            </div>

    </body>
</html>
javascript

  • What calculations should make the result? The average I know, and the result?

  • What should appear as a result ?

  • approved and failed depending on average

3 answers

2

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
    </head>
    <body>
        <!-- explicação do problema conforme você postou colega

            Prototipo Sistema Academico:
                function calcula_media(i){ 
                    var N1 = document.getElementsByName("n1")[i].value;
                    var N2 = document.getElementsByName("n2")[i].value;
                    var media = document.getElementsByName("media");
                    var calculo = ( parseFloat(N1) + parseFloat(N2) )/2;
                    var result = document.getElementsByName("resultado");

                    document.getElementsByName("resultado").innerHTML += "aprovado";
                    if(calculo >=7){
                        media[i].innerHTML = "+calculo+";
                    }
                }
        -->
        <div class="container">
            <h2>Hover Rows</h2>
            <p>The .table-hover class enables a hover state on table rows:</p>
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>Estudante</th>
                        <th>N1</th>
                        <th>N2</th>
                        <th>Média</th>
                        <th>Resultado Final</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Ana da Silva</td>
                        <td><input type="number" value="0" min="0.0" step="0.1" max="10.0" name="n1" onchange="calcula_media(0)"></td>
                        <td><input type="number" value="0" min="0.0" step="0.1" max="10.0" name="n2" onchange="calcula_media(0)"></td>
                        <td><div name="media">0,0</div></td>
                        <td><div name="resultado">-- </div></td>
                    </tr>
                    <tr>
                        <td>Beatriz da Silva Leite</td>
                        <td><input type="number" value="0" min="0.0" step="0.1" max="10.0" name="n1" onchange="calcula_media(1)"></td>
                        <td><input type="number" value="0" min="0.0" step="0.1" max="10.0" name="n2" onchange="calcula_media(1)"></td>
                        <td><div name="media">0,0</div></td>
                        <td><div name="resultado">-- </div></td>
                    </tr>
                    <tr>
                        <td>Breno Silva da Silva</td>
                        <td><input type="number" value="0" min="0.0" step="0.1" max="10.0" name="n1" onchange="calcula_media(2)"></td>
                        <td><input type="number" value="0" min="0.0" step="0.1" max="10.0" name="n2" onchange="calcula_media(2)"></td>
                        <td><div name="media">0,0</div></td>
                        <td><div name="resultado">-- </div></td>
                    </tr>
                    <tr>
                        <td>Carlos da Silva</td>
                        <td><input type="number" value="0" min="0.0" step="0.1" max="10.0" name="n1" onchange="calcula_media(3)"></td>
                        <td><input type="number" value="0" min="0.0" step="0.1" max="10.0" name="n2" onchange="calcula_media(3)"></td>
                        <td><div name="media">0,0</div></td>
                        <td><div name="resultado">-- </div></td>
                    </tr>
                    <tr>
                        <td>Caroline Soares</td>
                        <td><input type="number" value="0" min="0.0" step="0.1" max="10.0" name="n1" onchange="calcula_media(4)"></td>
                        <td><input type="number" value="0" min="0.0" step="0.1" max="10.0" name="n2" onchange="calcula_media(4)"></td>
                        <td><div name="media">0,0</div></td>
                        <td><div name="resultado">-- </div></td>
                    </tr>
                    <tr>
                        <td>Debora Machado</td>
                        <td><input type="number" value="0" min="0.0" step="0.1" max="10.0" name="n1" onchange="calcula_media(5)"></td>
                        <td><input type="number" value="0" min="0.0" step="0.1" max="10.0" name="n2" onchange="calcula_media(5)"></td>
                        <td><div name="media">0,0</div></td>
                        <td><div name="resultado">-- </div></td>
                    </tr>
                    <tr>
                        <td>Daniel Guerrera</td>
                        <td><input type="number" value="0" min="0.0" step="0.1" max="10.0" name="n1" onchange="calcula_media(6)"></td>
                        <td><input type="number" value="0" min="0.0" step="0.1" max="10.0" name="n2" onchange="calcula_media(6)"></td>
                        <td><div name="media">0,0</div></td>
                        <td><div name="resultado">-- </div></td>
                    </tr>
                    <tr>
                        <td>Fabiana Molina</td>
                        <td><input type="number" value="0" min="0.0" step="0.1" max="10.0" name="n1" onchange="calcula_media(7)"></td>
                        <td><input type="number" value="0" min="0.0" step="0.1" max="10.0" name="n2" onchange="calcula_media(7)"></td>
                        <td><div name="media">0,0</div></td>
                        <td><div name="resultado">-- </div></td>
                    </tr>
                    <tr>
                        <td>Helena Garcia</td>
                        <td><input type="number" value="0" min="0.0" step="0.1" max="10.0" name="n1" onchange="calcula_media(8)"></td>
                        <td><input type="number" value="0" min="0.0" step="0.1" max="10.0" name="n2" onchange="calcula_media(8)"></td>
                        <td><div name="media">0,0</div></td>
                        <td><div name="resultado">-- </div></td>
                    </tr>
                    <tr>
                        <td>Galvão Bueno </td>
                        <td><input type="number" value="0" min="0.0" step="0.1" max="10.0" name="n1" onchange="calcula_media(9)"></td>
                        <td><input type="number" value="0" min="0.0" step="0.1" max="10.0" name="n2" onchange="calcula_media(9)"></td>
                        <td><div name="media">0,0</div></td>
                        <td><div name="resultado">-- </div></td>
                    </tr>
                </tbody>
            </table>
        </div>

        <script>

            /*
            * Erros encontrados:
            *   - atributos colados(max="10.0"name="n1") correto(max="10.0" name="n1")
            *   - você não colocou o indice correto para media e resultado
            *   - a ordem dos objetos na sua função não estavam corretas
            *   - o indice é utilizado para recuperar o objeto em questão após não se faz necessário colocar na variável como você fez no result
            */

            function calcula_media(i){
                var N1 = document.getElementsByName("n1")[i].value;
                var N2 = document.getElementsByName("n2")[i].value;
                var calculo = ( parseFloat(N1) + parseFloat(N2) )/2;
                var media = document.getElementsByName("media")[i];
                media.innerHTML = calculo;
                var result = document.getElementsByName("resultado")[i];
                if(calculo >= 0.7){
                    result.innerHTML = "Aprovado";
                }else{
                    result.innerHTML = "Reprovado";
                }
            }
        </script>
    </body>
</html>

1

I see that you are using to get the values the getElementsByName method. Try using the getElementById method, which will always return only one value. I modified your Html to behave with Id instead of Name. Remembering that I did with only two students, just insert more students as the logic below:

<html lang="pt-br">
<head>
    <title>Prototipo Sistema Academico</title>
    <meta charset="UTF-8">
    <link rel='stylesheet' type='text/css' href='css/bootstrap.min.css'>
    <script src='js/bootstrap.min.js'></script>
    <script>
    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 >= 7)
        {
            media.innerHTML = "<div class='text-success'>" + calculo + "</div>";
            resultado.innerHTML = "Aprovado";
        }
        else
        {
            media.innerHTML = "<div class='text-danger'>" + calculo + "</div>";
            resultado.innerHTML = "Reprovado";
        }
    }
    </script>
</head>
<body>

        <div class="container">
          <h2>Hover Rows</h2>
          <p>The .table-hover class enables a hover state on table rows:</p>
          <table class="table table-hover">
            <thead>
              <tr>
                <th>Estudante</th>
                <th>N1</th>
                <th>N2</th>
                <th>Média</th>
                <th>Resultado Final</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Ana da Silva</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>Beatriz da Silva Leite</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>
            </tbody>
          </table>
        </div>
</body>

1

That solves your problem:

            function calcula_media(i){
                var n1 = document.getElementsByName("n1")[i].value;
                var n2 = document.getElementsByName("n2")[i].value;
                var media = document.getElementsByName("media");
                var resultado = document.getElementsByName("resultado");

                var calculo = (parseFloat(n1) + parseFloat(n2)) / 2;

                if(calculo >= 7)
                {
                    media[i].innerHTML = "<div class='text-success'>" + calculo + "</div>";
                    resultado[i].innerHTML = "<div class='text-success'>Aprovado</div>";
                }
                else
                {
                    media[i].innerHTML = "<div class='text-danger'>" + calculo + "</div>";
                    resultado[i].innerHTML = "<div class='text-danger'>Reprovado</div>";
                }
            }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
              <h2>Hover Rows</h2>
              <p>The .table-hover class enables a hover state on table rows:</p>
              <table class="table table-hover">
                <thead>
                  <tr>
                    <th>Estudante</th>
                    <th>N1</th>
                    <th>N2</th>
                    <th>Média</th>
                    <th>Resultado Final</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>Ana da Silva</td>
                    <td><input type="number" value="0" min="0.0" step="0.1" max="10.0" name="n1" onchange="calcula_media(0)"></td>
                    <td><input type="number" value="0" min="0.0" step="0.1" max="10.0" name="n2" onchange="calcula_media(0)"></td>
                    <td><div name="media"> </div></td>
                    <td><div name="resultado">-- </div></td>
                  </tr>
                  <tr>
                        <td>Beatriz da Silva Leite</td>
                        <td><input type="number" value="0" min="0.0" step="0.1" max="10.0" name="n1" onchange="calcula_media(1)"></td>
                        <td><input type="number" value="0" min="0.0" step="0.1" max="10.0" name="n2" onchange="calcula_media(1)"></td>
                        <td><div name="media">0,0</div></td>
                        <td><div name="resultado"> </div></td>
                  </tr>
                  <tr>
                        <td>Breno Silva da Silva</td>
                        <td><input type="number" value="0" min="0.0" step="0.1" max="10.0" name="n1" onchange="calcula_media(2)"></td>
                        <td><input type="number" value="0" min="0.0" step="0.1" max="10.0" name="n2" onchange="calcula_media(2)"></td>
                        <td><div name="media">0,0</div></td>
                        <td><div name="resultado"> </div></td>
                  </tr>
                  <tr>
                    <td>Carlos da Silva</td>
                    <td><input type="number" value="0" min="0.0" step="0.1" max="10.0" name="n1" onchange="calcula_media(3)"></td>
                    <td><input type="number" value="0" min="0.0" step="0.1" max="10.0" name="n2" onchange="calcula_media(3)"></td>
                    <td><div name="media">0,0</div></td>
                    <td><div name="resultado"> </div></td>
                  </tr>
                  <tr>
                    <td>Caroline Soares</td>
                    <td><input type="number" value="0" min="0.0" step="0.1" max="10.0" name="n1" onchange="calcula_media(4)"></td>
                    <td><input type="number" value="0" min="0.0" step="0.1" max="10.0" name="n2" onchange="calcula_media(4)"></td>
                    <td><div name="media">0,0</div></td>
                    <td><div name="media"> </div></td>
                  </tr>
                  <tr>
                    <td>Debora Machado</td>
                    <td><input type="number" value="0" min="0.0" step="0.1" max="10.0" name="n1" onchange="calcula_media(5)"></td>
                    <td><input type="number" value="0" min="0.0" step="0.1" max="10.0" name="n2" onchange="calcula_media(5)"></td>
                    <td><div name="media">0,0</div></td>
                    <td><div name="media"> </div></td>
                  </tr>
                  <tr>
                    <td>Daniel Guerrera</td>
                    <td><input type="number" value="0" min="0.0" step="0.1" max="10.0" name="n1" onchange="calcula_media(6)"></td>
                    <td><input type="number" value="0" min="0.0" step="0.1" max="10.0" name="n2" onchange="calcula_media(6)"></td>
                    <td><div name="media">0,0</div></td>
                    <td><div name="media"> </div></td>
                  </tr>
                  <tr>
                    <td>Fabiana Molina</td>
                    <td><input type="number" value="0" min="0.0" step="0.1" max="10.0" name="n1" onchange="calcula_media(7)"></td>
                    <td><input type="number" value="0" min="0.0" step="0.1" max="10.0" name="n2" onchange="calcula_media(7)"></td>
                    <td><div name="media">0,0</div></td>
                    <td><div name="media"> </div></td>
                  </tr>
                  <tr>
                    <td>Helena Garcia</td>
                    <td><input type="number" value="0" min="0.0" step="0.1" max="10.0" name="n1" onchange="calcula_media(8)"></td>
                    <td><input type="number" value="0" min="0.0" step="0.1" max="10.0" name="n2" onchange="calcula_media(8)"></td>
                    <td><div name="media">0,0</div></td>
                    <td><div name="media"> </div></td>
                  </tr>
                  <tr>
                    <td>Galvão Bueno </td>
                    <td><input type="number" value="0" min="0.0" step="0.1" max="10.0" name="n1" onchange="calcula_media(9)"></td>
                    <td><input type="number" value="0" min="0.0" step="0.1" max="10.0" name="n2" onchange="calcula_media(9)"></td>
                    <td><div name="media">0,0</div></td>
                    <td><div name="media"> </div></td>
                  </tr>
                </tbody>
              </table>
            </div>

Browser other questions tagged javascript

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