make javascript listen to an html element and manipulate the value of the property of another element if there is click

Question

I need to listen to an html element of id="hamburger", if the user clicks, javascript checks the value of the display property of another element, in the case id="Overlaynav", and changes the value, case display="None" turns into "block" and vice versa.

is giving syntax error, someone can exemplify how I make it happen?

I would like to make the whole box of my Overlaynav click sensitive, in case the user click on any screen area where there is no one <li>, the Overlaynav display becomes "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>

Answer 1

If code had some errors, the first is that you did not declare the pro variable OverlayNav after you put the variable status = OverlayNav.style.display = '' as a value = '' and you can just put the variable as OverlayNav.style.display and leaves to set the none or block in condition if/else

And if you want to click on OverlayNav He shuts you put another Listener with a function to click on it in case it is clicked on 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>