How to get java if stement not recognising nav display

<div class="top_navigation_menu">

    <img id="mobile_nav_open" class="mobile_menu" src="Images\menu.png" alt="Open Navigation">

        <nav>
            <div class="navigation_buttons">
                <img id = "mobile_nav_close" src="Images\close.png" alt="Close Navigation">

                <button class="n_button" ><a href= "index.html"> Home</a></button>
                <button class="n_button"><a href= "index.html"> Login</a></button>
                <button class="n_button"><a href= "index.html"> Features</a></button>
                <button class="n_button"><a href= "index.html"> Contact Us</a></button>
            </div>
        </nav>

</div>

<script>
    var mobile_open = document.getElementById('mobile_nav_open')
        var nav = document.querySelector('nav')
        var mobile_close = document.getElementById("mobile_nav_close")

        mobile_open.onclick = function(){
            if(nav.style.display == "none"){
                nav.style.display = "flex";

            }
            else{
                nav.style.display = "none";
            }

        }
</script>

.top_navigation_menu{
  height: 20px;
  width: 100%; 
  background-color: var(--primary-color);
  padding: 1.6em;
  position: absolute;
  top: 80px;

}


.mobile_menu{
  display: flex;
  cursor: pointer;
}


.navigation_buttons{
  display: block;
  position: relative;
  padding: 10px 24px;
  width: 10%;
  top: 10vh;
}

.n_button{
  color:white;
  background-color: transparent;
  cursor: pointer;
  outline: none;
  border:none;
  padding: 10px;
  border: 2px solid rgb(42,63,91);
  margin-top: 20px;
  width: 14.2em;
  font-size: 20px;
}

.n_button:hover{
  background-color: rgb(42,63,91);
}

a:link{
  text-decoration: none;
}

a:visited{
  color:white;
}

a:hover { 
  text-decoration: none; 
  font-weight: bold; 
}

#mobile_nav_close{
  position: absolute;
  top: -40px;
  
}




nav{
  
  position:fixed;
  z-index: 999;
  width: 66%;
  background-color: var(--primary-color);
  height: 100vh;
  padding: 1em;
  display: none;
}

@media only screen and (min-width: 768px){

  .mobile_menu{
    
    display:none;
  }

  .top_navigation_menu{
    display:grid;

  }

  nav{

    display:flex;
  }

}