javascript - 无法读取 HTMLDivElement 处未定义的属性“id”。

Question

当我单击向上时，它给了我这个错误。人们说 images[counter].id === 'last' 是未定义的，但如您所见。我尝试将 id 设置为“classname”并将 html 更改为 class，但该游戏出现了相同的错误，除了它说 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>
    ```

标签： javascripthtmlcss

Answer 1

因为images是从零开始的元素列表，并且您的计数器从 1 开始，您必须从计数器 1 中减去，如下所示：或者您可以通过简单地计算可用图像的数量和当前计数images[counter-1].id 来重新设计它而不使用任何：id

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>

或者简单地使用平滑滚动：

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>