Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

For não está iterando

Estou fazendo um projeto semelhante ao do curso para aplicar os conhecimentos adquiridos ao longo do curso. No entanto, estou fazendo um for e ele não está iterando no array.

No for para calcular a média final, ele não está iterando na variável aluno... Era pra exibir no log do console o aluno da posição 0, o da posição 1 e o outro da posição 2, no entanto, ele repete as 3 vezes somente os dados do aluno da posição 0. Não consegui encontrar o erro. :/

* Esse é o código de js para calcular a média final: *

var alunos = document.querySelectorAll(".aluno");

console.log(alunos);
console.log(alunos.length);
for (var i = 0; i<alunos.length; i++) {

    var aluno = alunos[i];

    var tdnome = document.querySelector(".info-nome");
    var nome = tdnome.textContent;
    console.log(nome)

    var tdturma = document.querySelector(".info-turma");
    var turma = tdturma.textContent;
    console.log(turma)

    var tdnota1 = document.querySelector(".info-nota1");
    var nota1 = tdnota1.textContent;
    console.log(nota1)

    var tdnota2 = document.querySelector(".info-nota2");
    var nota2 = tdnota2.textContent;
    console.log(nota2)

    var tdmediafim = document.querySelector(".info-mediafim");
    var mediafim = calculaMediaFim(nota1,nota2);
    console.log(tdmediafim);

}

function calculaMediaFim(nota1, nota2) {
    var mediafim = 0;
    mediafim = (nota1 * nota2) / 2;

    console.log(mediafim);
    return mediafim;
}

* Esse é o código do index.html: *

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title>Cadastro de Notas</title>
        <link rel="icon" href="favicon.jpg" type="image/x-icon">
        <link rel="stylesheet" type="text/css" href="css/reset.css">
        <link rel="stylesheet" type="text/css" href="css/index.css">

    </head>
    <body>

        <header>
            <div class="container">
                <h2 class="titulo">Notas de Alunos</h2>
            </div>
        </header>

        <main>
            <section class="container">
                <label for="filtrar-tabela">Filtre:</label>
                <input type="text" name="filtro" id="filtrar-tabela" placeholder="Digite o nome do aluno">
                <table>
                    <thead>
                        <tr>
                            <th>Nome</th>
                            <th>Turma</th>
                            <th>Nota 1</th>
                            <th>Nota 2</th>
                            <th>Média final</th>
                        </tr>
                    </thead>
                    <tbody id="tabela-alunos">
                        <tr class="aluno" >
                            <td class="info-nome">Paulo</td>
                            <td class="info-turma">BSI - 2018.1</td>
                            <td class="info-nota1">50.0</td>
                            <td class="info-nota2">50.0</td>
                            <td class="info-mediafim">0</td>
                        </tr>
                        <tr class="aluno" >
                            <td class="info-nome">João</td>
                            <td class="info-turma">BSI - 2018.1</td>
                            <td class="info-nota1">40.0</td>
                            <td class="info-nota2">50.0</td>
                            <td class="info-mediafim">0</td>
                        </tr>
                        <tr class="aluno" >
                            <td class="info-nome">Pedro</td>
                            <td class="info-turma">BSI - 2018.1</td>
                            <td class="info-nota1">20.0</td>
                            <td class="info-nota2">15.0</td>
                            <td class="info-mediafim">0</td>
                        </tr>

                    </tbody>
                </table>
                <span id="erro-ajax" class="invisivel">Erro ao buscar as notas dos alunos</span>

                <button id="buscar-notas" class="botao bto-principal">Buscar Notas</button>

            </section>
        </main>

        <section class="container">
            <h2 id="titulo-form">Adicionar</h2>
            <ul id="mensagens-erro"></ul>
            <form id="form-adiciona">
                <div class="">
                    <label for="nome">Nome:</label>
                    <input id="nome" name="nome" type="text" placeholder="digite o nome do aluno" class="campo">
                </div>
                <div class="grupo">
                    <label for="turma">Turma:</label>
                    <input id="turma" name="turma" type="text" placeholder="digite a turma do aluno" class="campo campo-medio">
                </div>
                <div class="grupo">
                    <label for="nota1">Nota 1:</label>
                    <input id="nota1" name="nota1" type="text" placeholder="digite a nota 1 do aluno" class="campo campo-medio">
                </div>
                <div class="grupo">
                    <label for="nota2">Nota 2:</label>
                    <input id="nota2" name="nota2" type="text" placeholder="digite a nota 2 do aluno" class="campo campo-medio">
                </div>

                <button id="adicionar-nota" class="botao bto-principal">Adicionar</button>
            </form>
        </section>

        <script src="js/calcula-media.js" ></script>

    </body>
</html>
2 respostas
solução!

Encontrei o erro. Eu estava fazendo dessa forma:

for (var i = 0; i<alunos.length; i++) {

    var aluno = alunos[i];

    var tdnome = document.querySelector(".info-nome");
    var nome = tdnome.textContent;
    console.log(nome)

Mas o correto seria alterar o .document para .aluno, dessa forma:

    var tdnome = aluno.querySelector(".info-nome");

Não consegui deletar o fórum, por isso respondi com a correção.

Opa, Eslin! Como vai?

Que bom que conseguiu resolver a questão! A propósito, quando for assim, não há necessidade de deletar o tópico! Sempre que possível compartilhe a solução conosco pois assim todos crescemos juntos! Inclusive, obrigado por compartilhar conosco dessa vez!

Grande abraço e bons estudos!