// Accessing all elements
const dropdownButton = document.querySelector("#dropdownToggle"),
fulfillSetButton = document.querySelector("#fulfillSetButton"),
dropdownMenu = document.querySelector('.dropdown-menu'),
html = document.querySelector("body"),
dateForm = document.querySelector("#completion-date-id");
// Preventing default form submission action
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
}
// Toggle dropdown menu visibility *working*
dropdownButton.addEventListener("click", function () {
dropdownMenu.classList.toggle("show");
});
// Close dropdown when clicked outside *new way works everywhere on page*
window.addEventListener('click', function(e){
if( dropdownButton.contains(e.target)){
} else{
dropdownMenu.classList.remove("show");
}
});
// Opening the date form
fulfillSetButton.addEventListener("click", function() {
dateForm.classList.add("active");
});
// Closing the date form by submitting
dateForm.lastElementChild.addEventListener(
"click", function () {
preventDefault();
dateForm.classList.remove("active");
}
);
// Closing the date form by clicking outside *now working*
window.addEventListener('click', function(e){
if( dateForm.contains(e.target) || fulfillSetButton.contains(e.target)){
} else{
dateForm.classList.remove("active");
}
});
:root {
--trans-left:#84fab0;
--trans-right:#8fd3f4;
--background: #fff;
--color: #222;
}
/* More CSS styles here */
.active{
display: block;
}
<body>
<section class="entry">
<form autocomplete="off">
<input type="text" id="taskText">
<div class="second-item">
<button type="button" id="fulfillSetButton">Date form</button>
<div class="dropdown-wrap">
<button class="btn dropdown" type="button" id="dropdownToggle">Dropdown button</button>
<ul class="dropdown-menu" id="taskPriority" style="background: linear-gradient(0deg, rgba(132,250,176,1) 0%, rgba(132,250,176,1) 33%, rgba(255,255,255,1) 33%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 66%, rgba(255,160,160,1) 66%, rgba(255,160,160,1) 100%); color: #000">
<li>High</li>
<li>Medium</li>
<li>Low</li>
</ul>
</div>
<button type="submit">Submit</button>
</div>
</form>
<form id="completion-date-id" class="completion-date active">
/* More HTML code here */
</form>
</section>
</body>