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>