Event.target not working when clicked outside of the div to close it

Question

I have a main div and the sub div which is also called form because form is wrapped inside of div. I want is to close the form when clicked outside of the main div but it's not happening at all. Please help me how to fix this.

 var btn = document.getElementById('opener'); var box = document.getElementById('abc'); var form = document.getElementById('def'); btn.onclick = function(){ box.style.display = "block"; } //Doesn't work. It's function is to close the form when click outside of the div. window.onclick = function(event){ if(event.target == box){ form.style.display = "none"; } } 

 #abc{ display: none; background-color: #F44336; } 

  <button id = "opener"> Open </button> <div id = "abc"> <!-- Login Authentication --> <div id = "def"> <div> <p>Welcome</p> </div> <br /> <div class = "login-auth" id = "cool"> <form method="POST"> <label>Email or Username:</label> <input type = "text"> <br /> <label>Password:</label> <input type = "password"> <br /><br /> <input type="submit" value="Login"> </form> </div> </div> </div> 

JSFiddle Link Here: https://jsfiddle.net/twrvpp3d/

Answer 1

Your code is working fine, the only problem that you need to stop the click event from propagating by using e.stopPropagation() for the button and the popup window, this will create the desired effect! Refer my below snippet!

#def{
  border:1px solid black;
}
#abc{
  padding:40px;
}

 var btn = document.getElementById('opener'); var box = document.getElementById('abc'); var form = document.getElementById('def'); btn.onclick = function(e) { e.stopPropagation(); box.style.display = "block"; } box.onclick = function(e) { e.stopPropagation(); } //Doesn't work. It's function is to close the form when click outside of the div. window.onclick = function(event) { box.style.display = "none"; } 

 #abc { display: none; background-color: #F44336; } #def { border: 1px solid black; } #abc { padding: 40px; } 

 <button id="opener"> Open </button> <div id="abc"> <!-- Login Authentication --> <div id="def"> <div> <p>Welcome</p> </div> <br /> <div class="login-auth" id="cool"> <form method="POST"> <label>Email or Username:</label> <input type="text"> <br /> <label>Password:</label> <input type="password"> <br /> <br /> <input type="submit" value="Login"> </form> </div> </div> </div> 

Answer 2

I know this is not what you are asking but can you make toggle button? its easier to do and more obvious for user.

 var btn = document.getElementById('opener'); var box = document.getElementById('abc'); var form = document.getElementById('def'); btn.onclick = function(e){ if(e.target.innerHTML === 'Open'){ box.style.display = "block"; e.target.innerHTML = "Close" }else{ box.style.display = "none"; e.target.innerHTML = "Open" } } //Doesn't work. It's function is to close the form when click outside of the div. window.onclick = function(event){ if(event.target == box){ form.style.display = "none"; } } 

 #abc{ display: none; background-color: #F44336; } 

  <button id = "opener"> Open </button> <div id = "abc"> <!-- Login Authentication --> <div id = "def"> <div> <p>Welcome</p> </div> <br /> <div class = "login-auth" id = "cool"> <form method="POST"> <label>Email or Username:</label> <input type = "text"> <br /> <label>Password:</label> <input type = "password"> <br /><br /> <input type="submit" value="Login"> </form> </div> </div> </div> 

Answer 3

window.onclick does not work on certain browsers. Try document.onclick instead.