Slider JS Cannot read property "id" of indefined at HTMLDivElement.

pytanie zadane 22 maja 2020 w JavaScript przez Stefan Marzec Użytkownik (710 p.)

Cześć. Spróbowałem zrobić slider z tego poradnika https://www.youtube.com/watch?v=KcdBOoK3Pfw. Wszystko po drobnych poprawkach działa do momentu instrukcji warunkowej. Przeglądarka wywala błąd: Cannot read property "id" of indefined at HTMLDivElement.<anonymous>. Sprawdziłem cały kod i nie mogę zrozumieć gdzie jest robal. Pomożecie?

Kody JS i HTML:

const carouselSlide = document.querySelector(".carousel-slide");
const carouselImages = document.querySelector(".carousel-slide img");

const prevBtn = document.querySelector("#prevBtn");
const nextBtn = document.querySelector("#nextBtn");

let counter = 1;
const size = 1080;

carouselSlide.style.transform = "translateX(" +(-size*counter)/2 + "px)";

nextBtn.addEventListener("click", ()=>{
	carouselSlide.style.tansition = "transform 0.4s ease-in-out";
	counter++;
	carouselSlide.style.transform = "translateX(" +(-size*counter)/2 + "px)";
});
prevBtn.addEventListener("click", ()=>{
	carouselSlide.style.transition = "transform 0.4s ease-in-out";
	counter--;
	carouselSlide.style.transform = "translateX(" +(-size*counter)/2 + "px)";
});
carouselSlide.addEventListener("transitionend", ()=>{
	if(carouselImages[counter].id === "lastClone"){
		carouselSlide.style.transition = "none";
		counter = carouselImages.length - 2;
		carouselSlide.style.transform = "translateX(" + (-size*counter)/2 + "px)";
	}
	if(carouselImages[counter].id === "firstClone"){
		carouselSlide.style.transition = "none";
		counter = carouselImages.length - counter;
		carouselSlide.style.transform = "translateX(" + (-size*counter)/2 + "px)";
	}
	
});

<!DOCTYPE HTML>
<html lang="pl">
	<head>
		<meta charset="utf-8"/>
		<title>Moje zainteresowania</title>
		<link rel="stylesheet" href="style1.css"/>
	</head>
	<body>
		<div id="label">Witaj na stronie poświęconej moim zainteresowaniom!</div>	
		<ul class="menu">
			<span class="menu_text">MENU</span>
			<a href="#rubik"><li class="option">Speedcubing</li></a>
			<a href="#fishing"><li class="option">Wędkowanie</li></a>
			<a href="#programming"><li class="option">Programowanie</li></a>
			<a href="#terra"><li class="option">Terrarystyka</li></a>
		</ul>
        <div class="div" id="rubik" ></div>
        <div class="hobby" >
            <h1>Speedcubing</h1>
            
        </div>
		<div class="div" id="fishing"></div>
		<div class="hobby">
			<h1>Wędkarstwo</h1>
			<div class="carousel-container">
				<div class="carousel-slide">
					<img src="fishing/fishing5.jpg" id="lastClone" alt=""/>
					<img src="fishing/fishing1.jpg" alt=""/>
					<img src="fishing/fishing2.jpg" alt=""/>
					<img src="fishing/fishing3.jpg" alt=""/>
					<img src="fishing/fishing4.jpg" alt=""/>
					<img src="fishing/fishing5.jpg" alt=""/>
					<img src="fishing/fishing1.jpg" id="firstClone" alt=""/>
				</div>
			</div>
			<button id="prevBtn">Prev</button>
			<button id="nextBtn">Next</button>
		</div>
		<div class="div" id="programming" ></div>
		<div class="hobby" >
			<h1>Programowanie</h1>
			
		</div>
		<div class="div" id="terra"></div>
		<div class="hobby">
			<h1>Terrarystyka</h1>
			
		</div>
		<script src="script.js"></script>
	</body>
</html>

komentarz 22 maja 2020 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)

wrzuć te 2 polecenia przed instukcje warunkowe i powiedz co dostaniesz.

console.log(carouselImages[counter])
console.log(carouselImages)

komentarz 22 maja 2020 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)

Co wgl jest dokładnie w zmiennej ?

const carouselImages = document.querySelector(".carousel-slide img");

komentarz 22 maja 2020 przez Stefan Marzec Użytkownik (710 p.)

Tablica przechowująca obiekty z klasy carousel-slide typu img.

komentarz 22 maja 2020 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)

wrzuciłeś te console logi?

komentarz 22 maja 2020 przez Stefan Marzec Użytkownik (710 p.)

Tak. Wyświetla że carouselSlide[counter] jest undefined. Samo carouselSlide wyświetla jako cały element img o id= lastClone za każdym razem jak zmienię obraz.

1 odpowiedź

odpowiedź 22 maja 2020 przez Tomek Sochacki Ekspert (227,490 p.)
wybrane 22 maja 2020 przez ScriptyChris

Najlepsza

const carouselImages = document.querySelector(".carousel-slide img");

tu pobierasz tylko pierwszy element dla tego selektora, a potem próbujesz traktować to jako listę. Użyj metody querySelectorAll i powiedz mi zadziała.