0

`i want my code to hide and show a div on click...but now it is just hiding for a milisecond and show again...so i don't know what is the problem can someone help me...thanks in advance

to hide when i click toggle and hide when i click again here is my code

const targetDiv = document.getElementById("insign");
const btn = document.getElementById("toggle");
btn.onclick = function() {
  if (targetDiv.style.display !== "none") {
    targetDiv.style.display = "none";
  } else {
    targetDiv.style.display = "block";
  }
};
.insign {
  position: absolute;
  margin-top: 20%;
  color: white;
  background-color: rgba(1, 1, 1, 0.7);
  border-radius: 9px;
  border: 1px solid gold;
  padding: 2% 1%;
  width: 25%;
  align-items: center;
  justify-content: center;
  text-align: center;
  animation: form 0.9s ease-out;
}
<form>
  <button class="signin" id="toggle">Sign In</button>

  <div class="insign" id="insign">

    <div class="content_in">
      <h1>Log In</h1>
    </div>
    <div class="content_in">
      <p>Username</p>
      <input type="text" placeholder="enter username"></div>
    <div class="content_in">
      <p>Password</p>
      <input type="password" placeholder="enter password"></div>
    <div class="content_in"><a>forgot password?</a><button id="sgnin">Log In</button></div>

  </div>
  <script>
  </script>
</form>
DarkBee
  • 16,592
  • 6
  • 46
  • 58
colts moe
  • 9
  • 1
  • 1
    Clicking the submit button submits the form which navigates to a new page. – Quentin Jul 13 '23 at 09:38
  • 1
    The default `type` for `button` is `submit` - so clicking this button will submit the form. You either need to prevent the default event action in your JavaScript handler function; or explicitly specify `type="button"`, to make this a "click button" instead of a submit button. – CBroe Jul 13 '23 at 09:39

0 Answers0