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

Minha solução, alguém tem alguma sugestão pra deixar mais enxuto?

Primeiro eu fiz outro botão com o nome de "Esconder", depois atribuí id's pra os botões de mostrar e de esconder.

Código JS:

const botaoMostra = document.querySelector("#botao-mostra")
const botaoEsconde = document.querySelector("#botao-esconde")
const lista = document.querySelector('.lista')

lista.hidden=true;

botaoMostra.addEventListener('click', () =>{
    lista.hidden=false
})

botaoEsconde.addEventListener('click', () =>{
    lista.hidden=true
})
4 respostas
solução!

Oi, Adailton. Você poderia usar apenas um botão


botaoMostra.addEventListener('click', () => {
  botaoMostra.innerText = (lista.hidden)? 'Esconder':'Mostrar'
  lista.hidden = !lista.hidden
})

Aaah, saquei! Obrigadão!

Eu criei três data-attributes (não reparem que meu código tá bilíngue, acabei criando coisas usando português e inglês :D

  • para o botão de exibir [data-display-list]
  • para o botão de esconder [data-hide-list]
  • para a lista [data-lista]

Meu main.js ficou assim:

const displayButton = document.querySelector('[data-display-list]');
const listaDeCores = document.querySelector('[data-lista]');
const hideButton = document.querySelector('[data-hide-list]');

displayButton.addEventListener('click', () => listaDeCores.classList.add('showList'));
hideButton.addEventListener('click', () => listaDeCores.classList.remove('showList'));

Essa classe showList criei no arquivo CSS esta classe .showList { display: block; } E na classe que já existia .listaeu adicionei um display: none, pra que a página carregasse sem exibir a lista. Assim, ela aparece quando clicado o primeiro botão, e desaparece quando clicado o novo botão.

Só pra não ficar "meia fofoca", segue o código dos botões (tirei o onclick):

<button data-display-list>Exibir tintas em estoque:</button>
<button data-hide-list>Limpar Lista</button>

Muito massa, Wagner! Obrigado!