I'm in the process of figuring out how to create a single JavaScript function that can manage multiple divs.
I currently have several divs with distinct ids and I've written separate JavaScript functions for each one. However, they either do not function correctly or only one of them works properly.
I suspect that they may be conflicting with each other and I'm exploring the possibility of using a single JavaScript function while still maintaining unique ids for each div.
Below is a basic example of my current setup:
Note: the script is designed to close a window when a user clicks outside a "container" window. Currently, only clicking on the last yellow container triggers the desired action.
var modal = document.getElementById('window-one');
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
var modal = document.getElementById('window-two');
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
var modal = document.getElementById('window-three');
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}div {
border: solid 2px black;
height: 20px;
background: yellow;
margin: 5px;
}<div id="window-one" class="container-one">1</div>
<div id="window-two" class="container-two">2</div>
<div id="window-three" class="container-three">3</div>