Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

document.querySelector( )

Referente ao curso JavaScript: programando na linguagem da web

por Vitória Mariano da Silva
| 79k xp | 13 posts

Após finalizar o curso decidi fazer um projeto parecido com o apresentado durante aula. A difernça é que a tabela recebe o nome do aluno e mais 4 notas, cada uma referente a um bimestre, dessas notas é calculado a média. Na 5° coluna, mostra a situação do aluno (aprovado ou reprovado) de acordo com sua média. Estou com um erro na quinta coluna que não consigo resolver, quando insiro um aluno ele mostra/cria corretamente a situação de aprovado ou reprovado, porém ao inserir outro novo aluno, não cria as especificações do campo situação informando aprovado ou reprovado, ainda substitui o campo situação do aluno anterior.

Em anexo estão as imagens para demonstrar melhor.Primeiro aluno adicionado, funcionamento okay Segunda aluno adicionado, erro no novo campo situação, criado 

var botaoAdicionar = document.querySelector('#adiciona-aluno')

botaoAdicionar.addEventListener('click', function (event) {
  event.preventDefault()

  var form = document.querySelector('#form-adiciona')
  var criandoAluno = aluno(form)
  console.log(criandoAluno)

  adicionaNovoAlunoNaTabela(criandoAluno)

  var notaFinal = criandoAluno.media
  console.log(notaFinal)

  var situacao = document.querySelector('.info-situacao')

  if (notaFinal >= 5) {
    console.log('Aprovado')
    situacao.textContent = 'Aprovado'
    situacao.style.background = 'green'
    situacao.style.color = 'white'
  } else {
    console.log('Reprovado')
    situacao.textContent = 'Reprovado'
    situacao.style.background = 'red'
    situacao.style.color = 'white'
  }

  form.reset()
})

function aluno(form) {
  var aluno = {
    nome: form.nome.value,
    nota1: form.nota1.value,
    nota2: form.nota2.value,
    nota3: form.nota3.value,
    nota4: form.nota4.value,
    media: calculaMedia(
      parseFloat(form.nota1.value),
      parseFloat(form.nota2.value),
      parseFloat(form.nota3.value),
      parseFloat(form.nota4.value)
    )
  }

  return aluno
}

function montaTr(criandoAluno) {
  var alunoTr = document.createElement('tr')
  alunoTr.classList.add('aluno')

  alunoTr.appendChild(montaTd(criandoAluno.nome, 'info-nome'))
  alunoTr.appendChild(montaTd(criandoAluno.nota1, 'info-nota1'))
  alunoTr.appendChild(montaTd(criandoAluno.nota2, 'info-nota2'))
  alunoTr.appendChild(montaTd(criandoAluno.nota3, 'info-nota3'))
  alunoTr.appendChild(montaTd(criandoAluno.nota4, 'info-nota4'))
  alunoTr.appendChild(montaTd(criandoAluno.media, 'info-media'))
  alunoTr.appendChild(montaTd(criandoAluno.situacao, 'info-situacao'))

  return alunoTr
}

function montaTd(dado, classe) {
  var alunoTd = document.createElement('td')
  alunoTd.classList.add(classe)
  alunoTd.textContent = dado

  return alunoTd
}

function adicionaNovoAlunoNaTabela(aluno) {
  var criarTr = montaTr(aluno)
  var tabela = document.querySelector('#tabelaDeNotas')
  tabela.appendChild(criarTr)
}
5 respostas
por Antônio Evaldo
| 416.9k xp | 636 posts
Alura Scuba Team Intrutor e Desenvolvedor de Software

Olá, Vitória, tudo bem?

Muito legal que você está fazendo seu próprio projeto! Continue assim!

Você também poderia enviar seu HTML para que possamos te auxiliar melhor? Também seria bom colocar o código da função calculaMedia, pois deve estar em outro arquivo.

Fico no aguardo!

por Vitória Mariano da Silva
| 79k xp | 13 posts

Esse é o codigo JavaScript do calculo da media 

var alunos = document.querySelectorAll('.aluno')

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

  var tdnota1 = aluno.querySelector('.info-nota1')
  var tdnota2 = aluno.querySelector('.info-nota2')
  var tdnota3 = aluno.querySelector('.info-nota3')
  var tdnota4 = aluno.querySelector('.info-nota4')
  var tdmedia = aluno.querySelector('.info-media')
  var tdsituacao = aluno.querySelector('.info-situação')

  var nota1 = parseFloat(tdnota1.textContent)

  var nota2 = parseFloat(tdnota2.textContent)

  var nota3 = parseFloat(tdnota3.textContent)

  var nota4 = parseFloat(tdnota4.textContent)

  var resultadoMedia = calculaMedia(nota1, nota2, nota3, nota4)
  tdmedia.textContent = resultadoMedia

  var validaAprovacao = validaMedia(resultadoMedia)

  if (validaAprovacao) {
    validaAprovacao = false
    tdsituacao.textContent = 'Aprovado'
    tdsituacao.style.background = 'green'
    tdsituacao.style.color = 'white'
  } else {
    validaAprovacao = true
    tdsituacao.textContent = 'Reprovado'
    tdsituacao.style.background = 'red'
    tdsituacao.style.color = 'white'
  }
}

function calculaMedia(nota1, nota2, nota3, nota4) {
  var media

  media = (nota1 + nota2 + nota3 + nota4) / 4

  return media.toFixed(2)
}

function validaMedia(media) {
  if (media >= 5) {
    return true
  } else {
    return false
  }
}
por Vitória Mariano da Silva
| 79k xp | 13 posts

Esse é o codigo html

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sistemas de Notas UNIVIC</title>

    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital@0;1&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <header>
      <div class="container">
        <h1 class="titulo">Sistemas de Notas UNIVIC</h1>
      </div>
    </header>
    <main>
      <section class="container">
        <h2>Disciplina Linguagem JavaScript</h2>
        <table>
          <thead>
            <tr>
              <th>Nome</th>
              <th>1° Bimestre</th>
              <th>2° Bimestre</th>
              <th>3° Bimestre</th>
              <th>4° Bimestre</th>
              <th>Média Final</th>
              <th>Situação</th>
            </tr>
          </thead>
          <tbody id="tabelaDeNotas">
            <tr class="aluno" id="primeiro-aluno">
              <td class="info-nome">Matheus</td>
              <td class="info-nota1">9</td>
              <td class="info-nota2">10</td>
              <td class="info-nota3">8.5</td>
              <td class="info-nota4">9</td>
              <td class="info-media">0</td>
              <td class="info-situação">0</td>
            </tr>

            <tr class="aluno">
              <td class="info-nome">Luana</td>
              <td class="info-nota1">8</td>
              <td class="info-nota2">7.5</td>
              <td class="info-nota3">5</td>
              <td class="info-nota4">9</td>
              <td class="info-media"></td>
              <td class="info-situação">0</td>
            </tr>

            <tr class="aluno">
              <td class="info-nome">Johnata</td>
              <td class="info-nota1">10</td>
              <td class="info-nota2">6</td>
              <td class="info-nota3">4.5</td>
              <td class="info-nota4">5</td>
              <td class="info-media"></td>
              <td class="info-situação">0</td>
            </tr>

            <tr class="aluno">
              <td class="info-nome">Larissa</td>
              <td class="info-nota1">1</td>
              <td class="info-nota2">2</td>
              <td class="info-nota3">3.5</td>
              <td class="info-nota4">2</td>
              <td class="info-media"></td>
              <td class="info-situação">0</td>
            </tr>
          </tbody>
        </table>
        <label for="filtrar-alunos">Pesquise:</label>
        <input type="text" id="filtrar-alunos" placeholder="Nome do aluno" />
      </section>
      <section class="container">
        <h2 id="titulo-form">Adicionar Aluno</h2>
        <form id="form-adiciona">
          <div class="grupo">
            <label for="nome">Nome</label>
            <input
              type="text"
              id="nome"
              placeholder="Nome"
              class="input-form"
            />
          </div>
          <div class="grupo">
            <label for="nota1">Primeiro Bimestre</label>
            <input
              type="text"
              id="nota1"
              placeholder="Nota 1"
              class="input-form"
            />
          </div>
          <div class="grupo">
            <label for="nota2">Segundo Bimestre</label>
            <input
              type="text"
              id="nota2"
              placeholder="Nota 2"
              class="input-form"
            />
          </div>
          <div class="grupo">
            <label for="nota3">Terceiro Bimestre</label>
            <input
              type="text"
              id="nota3"
              placeholder="Nota 3"
              class="input-form"
            />
          </div>
          <div class="grupo">
            <label for="nota4">Quarto Bimestre</label>
            <input
              type="text"
              id="nota4"
              placeholder="Nota 4"
              class="input-form"
            />
          </div>

          <button id="adiciona-aluno" class="botao">Inserir Dados</button>
        </form>
      </section>
    </main>
    <script src="./media.js"></script>
    <script src="./form.js"></script>
  </body>
</html>
solução!
por Antônio Evaldo
| 416.9k xp | 636 posts
Alura Scuba Team Intrutor e Desenvolvedor de Software

Olá novamente, Vitória!

O problema está quando você vai adicionar o novo aluno e quer pegar a td da situação dele:

botaoAdicionar.addEventListener('click', function (event) {
  // Código anterior...

  var situacao = document.querySelector('.info-situacao')

  // Código posterior...
})

O problema desse seletor é que o querySelector vai selecionar o primeiro elemento .info-situacao que ele encontrar, e por isso a td errada está sendo atualizada! Além disso, as classes no HTML estão com o nome info-situação (com acento e cedilha), o que pode dar problemas na seleção.

Na hora de adicionar um aluno, você está adicionando com a classe .info-situacao. Então, para que selecionemos sempre a última td adicionada, uma solução rápida seria mudar o seletor do código acima para o seguinte:

botaoAdicionar.addEventListener('click', function (event) {
  // Código anterior...

  var situacao = document.querySelector('tr:last-of-type .info-situacao')

  // Código posterior...
})

Ou seja, vamos sempre selecionar a .info-situacao da última tr do HTML! Ou seja, o último aluno adicionado.

Outra solução, talvez mais apropriada, é usar o querySelector dentro da própria tr do novo aluno! Algo assim:

var situacao = novoAlunoTr.querySelector('.info-situacao')

Mas para isso, você precisa antes capturar a tr e guardar na variável novoAlunoTr. Deixo como exercício!

Espero ter ajudado! Qualquer dúvida estaremos aqui para responder. Abraços e bons estudos! :)

por Vitória Mariano da Silva
| 79k xp | 13 posts

Olá novamente Antônio,

muito obrigada pela ajuda, conseguir resolver o problema com a sua dica, usando o querySelector. O código está funcionando perfeitamente. Mais uma vez muito obrigada! 

var botaoAdicionar = document.querySelector('#adiciona-aluno')

botaoAdicionar.addEventListener('click', function (event) {
  event.preventDefault()

  var form = document.querySelector('#form-adiciona')
  var criandoAluno = aluno(form)
  console.log(criandoAluno)

  adicionaNovoAlunoNaTabela(criandoAluno)

  form.reset()

  var novoAluno = document.querySelectorAll('.aluno')
  console.log(novoAluno)

  for (i = 0; i < novoAluno.length; i++) {
    var novos = novoAluno[i]
    var mediaNovoAluno = novos.querySelector('.info-media')
    console.log(mediaNovoAluno)
    var mediaAlunoNovo = mediaNovoAluno.textContent
    console.log(mediaAlunoNovo)
    var situacaoNovoAluno = novos.querySelector('.info-situação')
    console.log(situacaoNovoAluno)

    if (mediaAlunoNovo >= 5) {
      console.log('Aprovado')
      situacaoNovoAluno.textContent = 'Aprovado'
      situacaoNovoAluno.style.background = 'green'
      situacaoNovoAluno.style.color = 'white'
    } else {
      console.log('Reprovado')
      situacaoNovoAluno.textContent = 'Reprovado'
      situacaoNovoAluno.style.background = 'red'
      situacaoNovoAluno.style.color = 'white'
    }
  }
})

function aluno(form) {
  var aluno = {
    nome: form.nome.value,
    nota1: form.nota1.value,
    nota2: form.nota2.value,
    nota3: form.nota3.value,
    nota4: form.nota4.value,
    media: calculaMedia(
      parseFloat(form.nota1.value),
      parseFloat(form.nota2.value),
      parseFloat(form.nota3.value),
      parseFloat(form.nota4.value)
    )
  }

  return aluno
}

function montaTr(criandoAluno) {
  var alunoTr = document.createElement('tr')
  alunoTr.classList.add('aluno')

  alunoTr.appendChild(montaTd(criandoAluno.nome, 'info-nome'))
  alunoTr.appendChild(montaTd(criandoAluno.nota1, 'info-nota1'))
  alunoTr.appendChild(montaTd(criandoAluno.nota2, 'info-nota2'))
  alunoTr.appendChild(montaTd(criandoAluno.nota3, 'info-nota3'))
  alunoTr.appendChild(montaTd(criandoAluno.nota4, 'info-nota4'))
  alunoTr.appendChild(montaTd(criandoAluno.media, 'info-media'))
  alunoTr.appendChild(montaTd(criandoAluno.situacao, 'info-situação'))

  return alunoTr
}

function montaTd(dado, classe) {
  var alunoTd = document.createElement('td')
  alunoTd.classList.add(classe)
  alunoTd.textContent = dado

  return alunoTd
}

function adicionaNovoAlunoNaTabela(aluno) {
  var criarTr = montaTr(aluno)
  var tabela = document.querySelector('#tabelaDeNotas')
  tabela.appendChild(criarTr)
}

Insira aqui a descrição dessa imagem para ajudar na acessibilidade