I am facing an issue with my main div and sub div, which is referred to as a form because it is enclosed within the main div. I am trying to close the form when clicking outside of the main div, but unfortunately, this functionality is not working as expected. Can someone assist me in resolving this problem?
var btn = document.getElementById('opener');
var box = document.getElementById('abc');
var form = document.getElementById('def');
btn.onclick = function(){
box.style.display = "block";
}
//The code below should close the form when clicked 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>You can view the JSFiddle for this code here.