Entrar Ainda não tem acesso?
1
resposta

Tr não pinta de cinza ao adicionar novo paciente

Referente ao curso JavaScript : Programando na linguagem da web, no capítulo Conhecendo o querySelector e adicionando novos pacientes e atividade Conhecendo o querySelector e adicionando novos pacientes

por Leonardo Machado Fernandes
| 77.4k xp | 3 posts

Quando eu adiciono um novo paciente, essa nova tr não pinta de cinza ao passar o mouse sobre ela. insira seu código aqui //muda-de-cor.js var trs = document.getElementsByTagName("tr"); percorreArray(trs, function(trAtual) { trAtual.addEventListener("mouseover", function(){ this.setAttribute("bgColor", "grey"); }); });

//adiciona.jsvar botao = document.querySelector("#adicionar-paciente"); botao.addEventListener("click", function(event) { event.preventDefault(); // impede comportamento padrão var campoNome = document.querySelector("#campo-nome"); var campoPeso = document.querySelector("#campo-peso"); var campoAltura = document.querySelector("#campo-altura");

var novoPaciente = "

" + ""+campoNome.value+""+ ""+campoPeso.value+""+ ""+campoAltura.value+""+ ""+ "";

var todosPacientes = document.querySelector("table"); todosPacientes.innerHTML += novoPaciente;

campoNome.value = ""; campoPeso.value = ""; campoAltura.value = ""; });

1 resposta
por Daniel Omnion
| 1014.4k xp | 1150 posts

Isso deve estar acontecendo porque você aplica a cor ao abrir a página, como ao adicionar novos pacientes você não roda de novo a programação do muda-cor.js, as linhas novas ficam sem o efeito.

Uma forma de resolver isso seria aplicar o efeito para cada nova linha. Uma solução seria esta

//Esse é o final da sua programação de adicionar paciente, resto do código omitido

var todosPacientes = document.querySelector("table"); 
todosPacientes.innerHTML += novoPaciente;

campoNome.value = ""; 
campoPeso.value = ""; 
campoAltura.value = ""; 

//Pegar a ultima linha e aplicar o efeito
var tabelaAtualizada = document.querySelector("table"); 
var ultimaLinha = tabelaAtualizada.rows[tabelaAtualizada.rows.length-1];
ultimaLinha.addEventListener("mouseover", function(){ 
this.setAttribute("bgColor", "grey"); 
});