0

Preciso escutar um elemento html de id="hamburger", se o usuário clicar, o javascript verifica qual o valor da propriedade display de outro elemento, no caso id="OverlayNav", e altera o valor, caso display="none" transforma em "block" e vice versa.

tá dando erro de sintaxe, alguém pode exemplificar como faço isso acontecer?

gostaria de tornar todo o box do meu OverlayNav sensível ao click, para caso o usuário clicar em qualquer área de tela onde não houver um <li>, o display do OverlayNav se torne "none" tbm

<!-- Script do OverlayNav -->    

<script>
    document.getElementById("hamburger").addEventListener("click", function() {
        var status = OverlayNav.style.display = '';
        if (status === 'none') {
            var status = OverlayNav.style.display = 'block';
        } else {
            var status = OverlayNav.style.display = 'none';
        }
    });
</script>
0

1 Resposta 1

1

Se código tinha alguns erros, o primeiro é que vc não declarou a variável pro OverlayNav depois que vc colocou a variável status = OverlayNav.style.display = '' como um valor = '' e vc pode simplesmente colocar a variável como OverlayNav.style.display e deixa pra setar o none ou block na condição if/else

inserir a descrição da imagem aqui

E se vc quer que clicando no OverlayNav ele suma vc coloca outro listener com uma função de clique nele para caso seja clicado ele fique com display:none

var OverlayNav = document.getElementById("OverlayNav");

OverlayNav.addEventListener('click', function() {
  this.style.display = 'none';
})


document.getElementById("hamburger").addEventListener("click", function() {

  var status = OverlayNav.style.display;

  if (status == 'none') {
      OverlayNav.style.display = 'block';
  } else {
      OverlayNav.style.display = 'none';
  }

});
<div id="hamburger">hamburger</div>

<div id="OverlayNav">OverlayNav</div>

8
  • como vc comentou, nem precisaria criar uma nova var status onde está mudando o display do elemento, ficaria até melhor :) Commented 30/07/2019 às 22:33
  • @RicardoPontual vdd, na verdade é que como parti do código dele nem me atendei aos detalhes
    – hugocsl
    Commented 30/07/2019 às 22:34
  • eu entendi. aliás acho muito legal esse gifs animados Commented 30/07/2019 às 22:35
  • 1
    boa recomendação, baixando aqui :) Commented 30/07/2019 às 22:41
  • 1
    perfeito, tudo funcionando de acordo Commented 31/07/2019 às 0:15

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 .