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

Resolução - Dicas para melhorar?

Referente ao curso JavaScript: manipulando o DOM, no capítulo Montando um robô e atividade Consolidando o seu conhecimento

por Flávio Marques de Souza
| 40.8k xp | 2 posts
Desenvolvedor FullStack

//Fiz da forma mais simples que encontrei, porém acho que o código não ficou tão enxuto, aceito sugestões para melhorar.

//Primeiro fiz dois botões no html, Esconder e Mostrar e dei a class="botao" para eles. Depois no JS adicionei um evento de click para que alterasse o display da lista quando ciclado no esconder ou no mostrar.

var botao = document.querySelectorAll(".botao")

var lista = document.querySelector(".lista")

botao[0].addEventListener('click', () => {
    lista.style.display = "none"
})

botao[1].addEventListener('click', () => {
    lista.style.display = "block"
})
2 respostas
solução!
por Beatriz Moura
| 770.5k xp | 1156 posts
Alura Scuba Team Instrutora e Desenvolvedora de Software I

Olá Flávio, tudo bem?

Excelente! É uma ótima solução.

Uma outra maneira seria com o uso do setAttribute

const lista = document.querySelector("ul");

document.querySelector("#botao").addEventListener("click", () => {
  lista.setAttribute("data-lista", "mostrar");
});

document.querySelector(".close").addEventListener("click", () => {
  lista.setAttribute("data-lista", "esconder");
});

Continue praticando, abraços e bons estudos!

por Flávio Marques de Souza
| 40.8k xp | 2 posts
Desenvolvedor FullStack

Muito obrigado, Beatriz! :)