0

Boa tarde, sou novo em js e estou aprendendo!! Eu tenho uma tag <h1 class="title">, essa classe "title" tem alguns estilos css font-size; display-none; color! o que eu queria fazer é quando clicasse em um botão que tenho também no HTML, eu gostaria de remover apenas o display: none da classe. eu até coloquei o display: none em uma classe separada, para assim remover a classe toda, mas gostaria de saber como posso fazer removendo somente o display: none da classe title. meu código:

const btn = document.querySelector('.btn');
const title = document.querySelector('.title');
 
btn.addEventListener('click'), () => {
   // removendo a classe toda
   title.classList.remove('title');
}

Obrigado!!

4
  • 1
    Algo como title.style.display = "block". developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
    – Woss
    Commented 7/06/2022 às 21:46
  • 1
    Ou algo como title.classList.add('visible'), e crie uma classe visible com display: block.
    – bfavaretto
    Commented 7/06/2022 às 21:50
  • @Woss deu certo aqui, não tinha pensado nisso obrigado!!
    – Bruno
    Commented 7/06/2022 às 21:52
  • @bfavaretto minha intenção era evitar criar uma classe com somente o display: none/block, mas é uma opção boa, Obrigado!!
    – Bruno
    Commented 7/06/2022 às 21:56

1 Resposta 1

-3

eu acredito que o código anexado esta com erro ao passa os parâmetros no método "addEventListener", acredito que deveria ser da seguinte forma:

const btn = document.querySelector('.btn');
const title = document.querySelector('.title');

btn.addEventListener('click', () => {
    // removendo a classe toda
    title.classList.remove('title');
})

Outro problema que eu identifiquei é que quando é usado "title.classList.remove('title')", a variável "title" perde sua referência, acredito que voce deveria utilizar uma outra classe para alterar seu estilo, por exemplo "title-visible", assim seu código poderia ficar:

const btn = document.querySelector('.btn');
const title = document.querySelector('.title');

btn.addEventListener('click', () => {
    // removendo a classe toda
    title.classList.remove('title-visble');
})

No css:

.title {
    visibility: hidden;
 }

 .title {
    visibility: visible;
 }

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .