无法读取 HTMLDivElement 上未定义的属性'id'。<anonymous>

Question

当我点击向上它给了我这个错误。人们说图像[计数器]。Id === 'last'是未定义的，但正如您所看到的。我试着让id "classname"然后把HTML改成class，但是那个游戏还是同样的错误，除了它说的是classnameJS:

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

由于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>