¿Por qué no funciona cuando presiono el botón anterior, es como si tanto el botón anterior como el siguiente fueran iguales?
aquí está el código: https://codepen.io/pinkypink/pen/NWjzMre
const images = document.querySelector('.carousel_images'); const buttons = document.querySelectorAll('.carousel_button'); const imageCount = document.querySelectorAll('.carousel_images img').length; let imageIndex = 1; let translateX = 0; buttons.forEach(button => { button.addEventListener('click', e => { if (e.target.id === 'next') { if (imageIndex !== 1) { imageIndex--; translateX += 650; } } else { if (imageIndex !== imageCount) { imageIndex++; translateX -= 683; } } images.style.transform = `translateX(${translateX}px)`; }); });Utilice e.currentTarget no e.target .
e.target es el elemento en el que se hizo clic; en su caso, el elemento SVG.
e.currentTarget es el elemento cuyo detector de eventos se llama; en su caso, el div.
Lo que estoy señalando en el comentario es que si agrega la console... instrucción, verá que e.target.id devuelve una cadena vacía ("").
Por lo tanto, la sentencia if se convierte en
if ("" === 'next') { que siempre será falso, por lo que se ejecuta la instrucción else , que es el botón previous .
buttons.forEach(button => { button.addEventListener('click', e => { if ("" === 'next') { <------------------------------------- if (imageIndex !== 1) { imageIndex--; translateX += 650; } } else { if (imageIndex !== imageCount) { imageIndex++; translateX -= 683; } } images.style.transform = `translateX(${translateX}px)`; }); });Esto responde a su pregunta: ¿por qué no funciona cuando presiono el botón anterior, es como si tanto el botón anterior como el siguiente fueran iguales?