Estoy tratando de averiguar cómo hacer que una sola función de JavaScript controle múltiples divs .
Tengo varios divs con diferentes ids y escribí funciones de JavaScript idénticas para cada uno de ellos por separado. Sin embargo, las funciones no funcionan o solo una de ellas lo hace.
Creo que lo más probable es que se impidan trabajar entre sí y me pregunto si hay una manera de usar una sola función de JavaScript pero manteniendo las ids únicas en los divs .
Aquí hay un ejemplo muy simple de lo que estoy trabajando:
Nota: se supone que el script cierra una ventana si un usuario hace clic en cualquier lugar fuera de una ventana de "contenedor". Por el momento, solo haciendo clic en el último contenedor amarillo
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>
El problema es que declaras la misma variable 3 veces con 3 valores diferentes. Su variable se declara globalmente. Por lo tanto, se sobrescribirá cada vez.
Además, la solución sería agregar una propiedad común a todos los modales (por ejemplo, un className). Selecciónalos todos. Vea en cuál se hizo clic y haga cosas con él.
Vea a continuación un ejemplo simplista
const modals = document.querySelectorAll('.modal')
const doStuffWithModal = (modal) => modal.style.display = 'none'
modals.forEach(modal => modal.addEventListener('click', () => doStuffWithModal(modal)))
.modal {
width: 100px;
height:100px;
background:red;
margin: 20px
}
.modal.container-two {
background:blue
}
.modal.container-three {
background: green
}
<div id="window-one" class="container-one modal"></div>
<div id="window-two" class="container-two modal "></div>
<div id="window-three" class="container-three modal" ></div>