Js show/hide function -> hide/show

I am trying to make a simple pop-up form onClick but I don’t want it to show and then hide I want hidden -> show I used this: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_toggle_hide_show I set display: none;

I tried swapping the if statements even but none of it worked:

        <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;
}

Answer

The function toggle on the classList of an element is useful here.

Just set up a class called say ‘hide’ which sets display none, set the box to have that class initially so it’s not seen on load.

Then toggle that class on each click of the button.

function showunshow() {
  document.getElementById("box").classList.toggle('hide');
}
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;
}

.hide {
  display: none;
}
<button onclick="showunshow()">Sign-in/Log-in</button>
<!-- Login Pop-up -->
<form id="box" method="post" class="hide">
  <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>