1
resposta

Resolução - Manipulando o DOM

Depois de muito tempo batendo cabeça e 1001 soluções frustradas...

Primeio iniciei incluindo o "display: none" ao style.css para que a .lista não estivesse na página até que pressionado o botão:

.lista {
  padding: 20px;
  list-style-type: none;
  border: 4mm ridge rgba(234, 122, 11, 0.992);
  display: none;
}

O segundo passo foi adicionar a classe "botao" a tag que iria executar a função de mostrar/esconder o estoque:

<button class="botao" onclick="mostraTintas(this)">Aluratintas em estoque:</button>

Finalizei executando um addEventListener no botão alterando o display entre none e block:

const botao = document.querySelector(".botao")
const tintas = document.querySelector(".lista")

botao.addEventListener('click', () => {
    if(tintas.style.display === "none") {
        tintas.style.display = "block";
    } else {
        tintas.style.display = "none";
    }
})
1 resposta

Oi Lucas, tudo bem?

Parabéns por não desistir diante das frustrações. Muito obrigada por compartilhar com a gente o seu resultado, ficou muito bom!

Com certeza sua resposta vai poder ajudar outras pessoas aqui no fórum! Atitude muito legal de compartilhar :D

Um abraço e bons estudos.