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

Dúvida ao muda a cor dos nomes

Boa tarde pessoal,

Estava realizando uns testes e queria mudar as cores somente das letras dos nomes dos pacientes.

Porém o código que fiz, gera um erro de: Uncaught TypeError: mudaCor.addEventListener is not a function

Alguém sabe a solução ?

Obrigado.

 var mudaCor = document.getElementsByClassName("info-nome");
 mudaCor.addEventListener("mouseover", function(){

             this.setAttribute("style", "color:red");

 });
5 respostas

Oi Gustavo, tudo bem? Olha o seletor getElementsByClassName retorna uma lista de elementos e o addEventListener não funciona para uma lista inteira de elementos, mas sim pra um elemento único.

Você pode fazer um for e adicionar este eventListener pra cada um dos elementos retornados. Testa ai pra ver se funciona? Abraço

solução!

Bom dia Gustavo,

O problema em seu código é que você está atribuindo o addEventListener a uma lista de elementos, e isso não funciona.

A solução para a sua pergunta está logo abaixo:

var lista = document.getElementsByClassName("info-nome");

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

    var tdAtual = lista[i];

    tdAtual.addEventListener("mouseover", function(){
        this.style.color = "red";
    });
}

Primeiro eu encontrei a lista de <td> que pertence a classe info-nome. Com essa lista em mãos, utilizei o for para percorre-la e para cada item dessa lista eu adicionei um evento de mouseover.

É importante notar que essa solução apenas altera a cor do <td class="info-nome">, o que fica um pouco estranho, por isso, além de adicionar um evento de mouseover eu recomendo adicionar um evento de mouseout alterando a cor para preto quando o mouse não estiver sobre o <td>.

Abaixo segue o código completo, utilizando o evento de mouseout:

var lista = document.getElementsByClassName("info-nome");

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

    var tdAtual = lista[i];

    tdAtual.addEventListener("mouseover", function(){
        this.style.color = "red";
    });

    tdAtual.addEventListener("mouseout", function(){
        this.style.color = "black";
    });
}

Abraço e bons estudos!

Poxa,

Muito obrigado pela atenção Wanderson e Leonardo, era exatamente isso que queria Leonardo.

Em comunidade todos crescemos juntos.

Abraços meu caros,

Feliz Natal para vocês !!

Não precisa agradecer por nada Gustavo!

Com certeza, um ajudando o outro nos levará cada vez mais longe! E só temos a ganhar com essas interações e com a ajuda das pessoas! =)

Abraço amigo!

Feliz natal pra você também!

Gustavo, não esquece de marcar o tópico como solucionado na resposta que lhe ajudou. Tudo bem? Isso sinaliza que o problema foi resolvido antes mesmo de outro aluno ler todos os comentários.

Obrigado :)

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software