Estoy aprendiendo algo de JS ahora y tengo algunos problemas con una nueva funcionalidad que estoy tratando de agregar a un sitio web.
Diseñé un div con una imagen de vista previa y una barra de navegación debajo con 4 miniaturas de las imágenes por las que puede navegar, tengo dos botones para que pueda navegar por las imágenes más rápido. Mi objetivo es cambiar de una imagen a otra con JS tratando de evitar CSS para poder practicar. El código que escribí cambia a la siguiente imagen inmediata pero no a la siguiente, sin importar cuántas veces haga clic en el botón "siguiente".
Copié todo el CSS del proyecto en el bolígrafo y no puedo eliminarlo. No creo que debas revisar el CSS, pero si es así, la parte del código que tiene que ver con esta pregunta comienza en la línea 410, ignora el resto.
Por el momento, solo quiero que navegue hacia adelante. Estoy trabajando con una matriz, pero si alguien tiene un enfoque diferente, ¡hágamelo saber!
Perdón por mi inglés, espero haberme dejado claro. De todos modos, aquí está mi bolígrafo para que veas de lo que hablo: https://codepen.io/Nulaxz/pen/poroKJg .
Aquí está la función real que estoy usando pero parece que no funciona. Los dos últimos "console.log" son solo para fines de prueba.
nextBtn.addEventListener('click', () => { const result = arr => { count++; if (count >= 4) { count = 0; }; return `<div class="img-div"> <img src="http://127.0.0.1:5500/img/icon-previous.svg" alt="prev-btn" class="prev-btn"> <img src=${arr[count]} alt="" id="image-1-preview"> <img src="http://127.0.0.1:5500/img/icon-next.svg" alt="next-btn" class="next-btn"> </div>`; }; imgPreview.innerHTML = result(imgArr); console.log(count); console.log(result(imgArr)); });Este proyecto es un reto de FrontEndMentor, por si alguien lo hizo en el pasado y me puede decir como lo resolvió.
El problema es que también estás recreando el siguiente botón. Hace que el elemento del botón se elimine del DOM (junto con su detector de eventos de click ) y se vuelva a crear. Es por eso que el botón ya no funciona.
Lo que podría hacer es simplemente actualizar la propiedad src de la imagen. al igual que:
nextBtn.addEventListener('click', () => { count++; if (count >= 4) { count = 0; }; document.getElementById('image-1-preview').src = arr[count]; });