I need to open the box with any button, I already have the code but I don't know how to add the id of the box in addEeventListener, example, openCity('box')
What do I add to fulfill its function without having to change all the code?
function openCity(cityName) {
var i;
var x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(cityName).style.display = "block";
}
document.addEventListener("DOMContentLoaded", (event) => {
document.querySelectorAll('.look button').forEach((boton) => {
boton.addEventListener('click', openCity); /* cómo puedo añadirle la id 'caja' openCity('caja')*/
});
});
.look{
padding: 15px;
background-color: #ddd;
text-align: center;
}
.city{
height: 100px;
background-color: #ff0;
display: none;
}
<div class="look">
<button>Open 1</button>
<button>Open 2</button>
<button>Open 3</button>
<button>Open 4</button>
<button>Open 5</button>
</div>
<div id="caja" class="city"></div>
Use a closure:
I leave you a link so you can read more about it: Closure