why isn't it not working when I press the previous button, it's like both the previous and next button are the same
here's the code: 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)`;
});
});
Use e.currentTarget not e.target.
e.target is the element that was clicked - in your case the SVG element.
e.currentTarget is the element whose event listener is being called - in your case the div.
What I am pointing out in the comment is that if you add the console... statement, you will see that e.target.id returns an empty string ("").
Therefore, the if statement becomes
if ("" === 'next') {
which will always be false so the else statement runs which is the previous button.
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)`;
});
});
This answers your question: why isn't it working when I press the previous button, it's like both the previous and next button are the same