Hola tengo un array de elementos 'li' que a su vez contienen otros elementos html ('a' e 'img'). Estoy haciendo un slider, y para lo cual deseo crear unos botones a los cuales les asigno un AddEventListener para que con eventos del mouse ejecuten cierta función con variables que tienen un valor según el índice que le corresponda a cada elemento en el array y el valor de la propiedad o atributo que necesito mostrar. Para esto uso un for y dentro una función. El problema es que no logro que cada botón devuelva el valor que le corresponde cuando se ejecuta la función, todos los botones devuelven el valor el último elemento del Array. Ya intenté mandar los valores de los arrays como parámetros, también setear para cada botón el atributo onclick para agregarles ahi la función, pero tampoco me funciona.
Si verifico con un console log las variables, si me muestra su valores correspondiente y que el for funciona, el problema, es cuándo hago uso de una función y llamar los valores desde dentro de el.
Espero puedan ayudarme con la solución.
botones = document.querySelectorAll('.s_bullets ul li');
for(b = 0; b<botones.length; b++){
btnBanner = botones[b];
imgbullets = btnBanner.querySelector('a span img');
altBanner = imgbullets.getAttribute('alt');
console.log(altBanner);
mostrar = function(){
console.log(`Soy el boton ${b} te enviaré al baner ${altBanner}`);
}
btnBanner.addEventListener("click", mostrar);
btnBanner.addEventListener("mouseover", function(){imgbullets.style.display = "block"});
btnBanner.addEventListener("mouseleave", function(){imgbullets.style.display = "none"});
}
<div id="slider-container">
<div class="s_images">
<ul>
<li><a href="<?php echo $Myurl; ?>categoria/acuaticos/" title="Toboganes Inflables"><img src="<?php echo $Myurl; ?>data1/images/acuaticos.jpg" alt="Tobogan inflable con forma de tiburón junto a una gran alberca" title="Divertidos y seguros toboganes" id="s_0"/></a></li>
<li><a href="<?php echo $Myurl; ?>categoria/deportivos/" title="Equipos deportivos"><img src="<?php echo $Myurl; ?>data1/images/eventos_deportivos.jpg" alt="Estudiantes interactuando con inflables deportivos en la cancha de basquetball de su colegio." title="Equipos deportivos para tus actividades de integración" id="s_1"/></a></li>
<li><a href="#"><img src="data1/images/grandes_eventos2.jpg" title="¡Grandes Eventos!" alt="Niños con sus padres jugando en distintos brincolines inflables en un campo de deportivo." title="¡Tu solución para grandes eventos!" id="s_2"/></a></li>
<li><a href="<?php echo $Myurl; ?>categoria/futbolitos/" title="Futbolitos"><img src="<?php echo $Myurl; ?>data1/images/inflables_y_futbolitos.jpg" alt="Dos brincolines inflables y una mesa de futbolito en un jardín." title="Solo preocupate de tus invitados, nosotros de la diversión" id="s_3"/></a></li>
<li><a href="<?php echo $Myurl; ?>categoria/brincolines/" title="Eventos empresariales y hoteleros"><img src="<?php echo $Myurl; ?>data1/images/parque_inflables.jpg" alt="Cinco brincolines inflables distribuidos en un salón de eventos." title="Armamos tu propio salón de juegos" id="s_4"/></a></li>
<li><a href="<?php echo $Myurl; ?>categoria/acuaticos/" title="Toboganes Inflables"><img src="<?php echo $Myurl; ?>data1/images/acuaticos.jpg" alt="Tobogan inflable con forma de tiburón junto a una gran alberca" title="Divertidos y seguros toboganes" id="s_5"/></a></li>
</ul>
</div>
<div class="s_bullets">
<ul>
<li><a href="#" ><span><img src="<?php echo $Myurl; ?>data1/tooltips/acuaticos.jpg" alt="Toboganes Inflables"/>1</span></a></li>
<li><a href="#" ><span><img src="<?php echo $Myurl; ?>data1/tooltips/eventos_deportivos.jpg" alt="Equipos deportivos"/>2</span></a></li>
<li><a href="#" ><span><img src="<?php echo $Myurl; ?>data1/tooltips/grandes_eventos2.jpg" alt="¡Grandes Eventos!"/>3</span></a></li>
<li><a href="#" ><span><img src="<?php echo $Myurl; ?>data1/tooltips/inflables_y_futbolitos.jpg" alt="Futbolitos"/>4</span></a></li>
<li><a href="#" ><span><img src="<?php echo $Myurl; ?>data1/tooltips/parque_inflables.jpg" alt="Eventos empresariales y hoteleros"/>5</span></a></li>
</ul>
</div>
<div class="s_script" ></div>
<div class="s_shadow"></div>
</div>