Js顯示/隱藏功能->隱藏/顯示

我試圖制作一個簡單的pop-up表單onClick，但我不想讓它顯示然后隱藏我想隱藏->顯示我使用了這個：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_toggle_hide_show我設置display: none;

我嘗試交換if語句，但都不起作用：

        <script>
        function show() {
          var x = document.getElementById("box");
          if (x.style.display === "none") {
            x.style.display = "block";
          } else {
            x.style.display = "none";
          }
        }
        </script>
<button onclick="show()">Sign-in/Log-in</button> 
    <!-- Login Pop-up -->
    <form id="box" method="post">
        <input id="text" type="text" name="user_name"><br><br>
        <input id="text" type="password" name="password"><br><br>
                
        <input id="button" type="submit" value="Login"><br><br>
                
        <a>Don't have an account? Sign-up </a>
    </form>

Styles

button {
    margin-left: 20px;
    padding: 9px 25px;
    color:white;
    background-color: #eb266e;
    border: none;
    border-radius: 50px;
    cursor: painter;
    transition: all 0.3s ease 0s;
}

button:hover {
    color: #eb266e;
    background-color: white;
    border: 1px solid #eb266e;
}
    
#box {
    border: solid 1px black;
    width: 200px ;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin-top: 20px;
}

我的實際站點：http://scriver.net/Sindex.php