buttons are like one, when i click either button they both do the same thing

user_16514137 0
Viewed 65

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)`;
  });
});
css html javascript
2 Answers

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.

user_48606880

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

user_88015990
Related