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

Deixar div visivel Javascript

por Ludgero Luan Hinorato Vinter
| 256.1k xp | 61 posts
Suporte Tecnico

Criei uma div

No CSS coloquei display none para deixar invisível .desenho{ display:none; }

No JavaScript, quero criar uma função, onde no click de um item de uma lista, que é um

  • , apareça e desapareça a div

var itemMenu = document.querySelector(".item-desenho");
var modelos = document.querySelector("#form-desenho");

itemMenu.addEventListener("click", function(){
    if(modelos.style.display = 'none'){    
        modelos.style.display = 'block';
    }
    else
    if(modelos.style.display = 'block'){    
        modelos.style.display = 'none';
    }
    console.log(modelos.style.display);
});

Porem, ao clicar uma vez, a div aparece, mas se eu clicar novamente, o display não volta para none. Tentei usar o GetElementByID, mas ocorre mesma coisa.

2 respostas
solução!
por Lucas Peixoto de Alencar Rocha
| 1056.7k xp | 1640 posts
Instrutor Dev

Olá Luan,

O primeiro detalhe é que você está utilizando apenas um = para fazer a comparação no if, assim você está colocando o valor como none e não está fazendo a comparação:

// Apenas um igual (=) vai alterar o valor para 'none'
if(modelos.style.display = 'none'){

// Utilize dois sinais de igual (==) para fazer uma comparação
if(modelos.style.display == 'none'){

Corrigindo isso ainda temos que fazer outra mudança, acontece que o valor inicial de modelos.style.display é nada, mesmo com o css aplicando um display, então nenhuma das comparações nunca vai ser verdadeira:

// Retorna false
if(modelos.style.display == 'none')

// Também retorna false
else if(modelos.style.display == 'block')

Você pode testar isso movendo o seu console.log(modelos.style.display); para o início do código js.

Um jeito simples de contornar esse segundo problema é você definir o valor inicial para o modelos.style.display:

// Melhor lugar para definir o valor padrão seria logo depois de selecionar o elemento
var modelos = document.querySelector("#form-desenho");
// Definindo o valor inicial para 'none'
modelos.style.display = 'none';

Espero ter ajudado, qualquer dúvida é só falar!

por Ludgero Luan Hinorato Vinter
| 256.1k xp | 61 posts
Suporte Tecnico

É verdade!! confundi com outras linguagens kk Desculpa e obrigado.