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

Duvida mudança de cor nas classe ! Em JavaScript

por Julio Cesar Silva Souza
| 98.1k xp | 28 posts
Desenvolvedor

Bom dia people da Alura, aqui estou tendo um problema que ano estou conseguindo ter uma ideia de resolver, preciso que 3 button da classe "apresentacao-link" mudem de cor apos a ação ser feita.

HTML

<div class="apresentacao-links ">
            <a class="apresentacao-link apresentacao-link_clear_mode" href="https://github.com/JuCanavans">GitHub</a>
            <a class="apresentacao-link" href="https://www.linkedin.com/in/julio-silva-developer">Linkedin</a>
            <a class="apresentacao-link" href="https://www.instagram.com/juliosouza_09/">Instagram</a>
        </div>

JS

const alterarModoTela = document.querySelector('#alternar-modo-page');
const bodyClear = document.querySelector('body');
const formularioClear = document.querySelector('.fomulario');
const linksClear = document.querySelector('.apresentacao-links');
const foto_clear = document.querySelector('.foto-principal');

alterarModoTela.addEventListener('click', () =>{
    bodyClear.classList.toggle('clear_mode');
    formularioClear.classList.toggle('formulario_clear_mode');
    foto_clear.classList.toggle('foto-principal_clear_mode');
    linksClear.classList.toggle('apresentacao-link_clear_mode');
})

Eu obtive sucesso apenas na primeira classe que alterou a cor com sucesso! Ficaria feliz em poder me ajudar !

Aqui esta o link do repositorio GitHub: https://github.com/JuCanavans/social_links

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

2 respostas
solução!
por Adriano Melo Santana Sobrinho
| 101.1k xp | 15 posts
Desenvolvedor

Boa tarde, Julio. Como você tá tentando buscar mais de uma tag HTML, no caso três botões, você precisa usar o "querySelectorAll", logo será armazenado na sua constante um Array com as três tags, basta apenas percorrer o mesmo. Fiz essa alteração no seu código, faça o mesmo e veja se resolve seu problema:

const alterarModoTela = document.querySelector('#alternar-modo-page');
const bodyClear = document.querySelector('body');
const formularioClear = document.querySelector('.fomulario');
const linksClear = document.querySelectorAll('.apresentacao-links');
const foto_clear = document.querySelector('.foto-principal');

alterarModoTela.addEventListener('click', () =>{
    bodyClear.classList.toggle('clear_mode');
    formularioClear.classList.toggle('formulario_clear_mode');
    foto_clear.classList.toggle('foto-principal_clear_mode');
    linksClear.forEach((link) => {
          link.classList.toggle("apresentacao-link_clear_mode");
    });
})

Espero ter ajudado, Bons estudos!!

por Julio Cesar Silva Souza
| 98.1k xp | 28 posts
Desenvolvedor

Interessante resolveu muito obrigado Adriano, ates eu ate tinha tentado essa solução do for.Each, desta maneira, e nao havia dado certo.

linksClear.forEach((link), () =>{
        link.classList.toggle('apresentacao-link_clear_mode');
    })

Da sua maneira resolveu muito bem, muito obrigado!