Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Minha solução e dúvida

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

por Estudante
| 106.4k xp | 76 posts

Olá a todos! :D

a minha resolução foi a seguinte: colocar no mesmo botão já existente a função de mostrar e ao ser clicado novamente esconder a lista, eis meu código:

const lista = document.querySelector(".lista");
const botao = document.querySelector("[data-botao]").addEventListener("click", (evento)=>{
  let relatedDiv = lista.setAttribute("style","display: none");
  let botaoClicado = evento.currentTarget.setAttribute("style", "display:block");  
})

Contudo só consigo esconder a lista, e ao clicar novamente no botão não consigo mostrar novamente, então onde estou errando?

1 resposta
solução!
por Lorena Garcia
| 8464.1k xp | 12397 posts
Alura Scuba Team Suporte Educacional

Oi estudante, tudo bem?

Desculpe a demora a retornar.

Uma possível solução para o seu problema seria adicionar uma verificação para saber se a lista está visível ou não, e então alterar o estilo de acordo com isso. Algo assim:

const lista = document.querySelector(".lista");
 const botao = document.querySelector("[data-botao]").addEventListener("click", (evento)=>{
  if (lista.style.display === "none") {
    lista.style.display = "block";
  } else {
    lista.style.display = "none";
  }
})

Dessa forma, ao clicar no botão, o código verifica se a lista está visível ou não. Se estiver invisível, ele a torna visível novamente. Caso contrário, ele a torna invisível.

Um abraço e bons estudos.