Cannot read property 'id' of undefined at HTMLDivElement.<anonymous>

Question

When i click on the up it gives me this error. people say that images[counter].id === 'last' is undefined but as you can see it is. I tried making id "classname" and changing the html to class, but that game the same error except it said classname JS:

const carouselSlide = document.querySelector('.carousel-slide');
const images = document.querySelectorAll('.carousel-slide img');

const up = document.querySelector('.up');
const down = document.querySelector('.down');

let counter = 1;  
const size = images[0].clientWidth;

down.addEventListener('click', ()=>{
  if(counter >= images.length - 1) return;
  carouselSlide.style.transition = 'transform 0.4s ease-in-out';
  counter++;
  carouselSlide.style.transform = 'translateY(' + (-size * counter) + 'px)';
});

up.addEventListener('click', ()=>{
  if(counter <= 0) return;
  carouselSlide.style.transition = 'transform 0.4s ease-in-out';
  counter--;
  carouselSlide.style.transform = 'translateY(' + (-size * counter) + 'px)';
});

carouselSlide.addEventListener('transitionend', ()=>{
  if(images[counter].id === 'last'){
    carouselSlide.style.transition = 'none';
    counter = carouselSlide.length - 2;
    carouselSlide.style.transform = 'translateY(' + (-size * counter) + 'px)';  }
  if(images[counter].id === 'first'){
    carouselSlide.style.transition = 'none';
    counter = images.length - counter;
    carouselSlide.style.transform = 'translateY(' + (-size * counter) + 'px)';
  }  
})

HTML

    <div class="carousel">
        <div class="carousel-slide">
            <img src="/img/g.jpg" id='last' alt="">
            <img src="/img/h.jpg" alt="">
            <img src="/img/i.jpg" id='first' alt="">
        </div>
    </div>
    ```

Answer 1

Since images is a list of elements zero-based, and your counter starts with 1 you must subtract from your counter 1, like so: images[counter-1].id Or you can redesign it without using any id by simply count the number available images and current count:

 const carouselSlide = document.querySelector('.carousel-slide'); const images = document.querySelectorAll('.carousel-slide img'); const up = document.querySelector('.up'); const down = document.querySelector('.down'); let counter = 0; const size = images[0].clientHeight; down.addEventListener('click', ()=>{ if(counter >= images.length) return; carouselSlide.style.transition = 'transform 0.4s ease-in-out'; counter++; carouselSlide.style.transform = 'translateY(' + (-size * counter) + 'px)'; }); up.addEventListener('click', ()=>{ if(counter < 0) return; carouselSlide.style.transition = 'transform 0.4s ease-in-out'; counter--; carouselSlide.style.transform = 'translateY(' + (-size * counter) + 'px)'; }); carouselSlide.addEventListener('transitionend', ()=>{ if(counter >= images.length){ carouselSlide.style.transition = 'none'; counter = 0; carouselSlide.style.transform = 'translateY(' + (-size * counter) + 'px)'; } if(counter < 0){ carouselSlide.style.transition = 'none'; counter = images.length-1; carouselSlide.style.transform = 'translateY(' + (-size * counter) + 'px)'; } })

 .carousel-slide { display: grid; }.carousel { height: 171px; overflow: hidden; }

 <button class="up">up</button> <button class="down">down</button> <div class="carousel"> <div class="carousel-slide"> <img src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w256-h171-n-l50-sg-rj" alt=""> <img src="https://lh3.googleusercontent.com/aS2Up3osDMLTua1vXPTqnXko13KbIAmB0nQ44AP_IFTEt-VjUa6Tz2MC9jdH11bsZfjdiR8z4HbnxvhmmxSU1swKrtjc5PXreP6i=w256-h171-n-l50-sg-rj" alt=""> <img src="https://lh3.googleusercontent.com/9pPCK70Rw0k3wethMHb1qMaIB0VjeWLy57vYgSzKbF7oJuvO2nA0Nakk-95cvibWUDcEhYkfCKvdPKT03tXZd4M5jdhIEibLO9qw-XE=w256-h171-n-l50-sg-rj" alt=""> </div> </div>

Or simply use smooth scrolling:

 const carouselSlide = document.querySelector('.carousel-slide'); const images = document.querySelectorAll('.carousel-slide img'); const up = document.querySelector('.up'); const down = document.querySelector('.down'); let counter = 0; const size = images[0].clientHeight; down.addEventListener('click', ()=>{ if(.counter) { images[0].style;order = "". images[images.length-1].style;order = "". } if (++counter >= images.length) { images[0].style;order = counter; counter = 0. } images[counter]:scrollIntoView({ behavior; 'smooth'}); }). up,addEventListener('click'. ()=>{ if (counter >= images.length - 1) { images[0].style;order = "". images[images.length-1].style;order = "". } if (--counter < 0) { images[images.length-1].style;order = 1. images[0].style;order = 2. images[0]:scrollIntoView({block. 'center' }) counter = images;length - 1. } images[counter]:scrollIntoView({ behavior; 'smooth'}); });

 .carousel-slide { display: grid; }.carousel { height: 171px; overflow: hidden; }

 <button class="up">up</button> <button class="down">down</button> <div class="carousel"> <div class="carousel-slide"> <img src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w256-h171-n-l50-sg-rj" alt=""> <img src="https://lh3.googleusercontent.com/aS2Up3osDMLTua1vXPTqnXko13KbIAmB0nQ44AP_IFTEt-VjUa6Tz2MC9jdH11bsZfjdiR8z4HbnxvhmmxSU1swKrtjc5PXreP6i=w256-h171-n-l50-sg-rj" alt=""> <img src="https://lh3.googleusercontent.com/9pPCK70Rw0k3wethMHb1qMaIB0VjeWLy57vYgSzKbF7oJuvO2nA0Nakk-95cvibWUDcEhYkfCKvdPKT03tXZd4M5jdhIEibLO9qw-XE=w256-h171-n-l50-sg-rj" alt=""> <img src="https://lh3.googleusercontent.com/8p9D7GbVg4hTJzKEveM4yltHxwm_zuAQAX1KqgRVL6gbodSsSJPIRVSE4-1_6wexbfZpbHW15kNvDSs0B_ycvhJyoPX1RZT3Ci17Aw=w256-h171-n-l50-sg-rj" alt=""> </div> </div>