• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
198 wizyt
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ź

+1 głos
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.

komentarz 22 maja 2020 przez Stefan Marzec Użytkownik (710 p.)
O kurde faktycznie xD Zapomniałem że taka funkcja istnieje, teraz to ma sens. Działa. Dzięki wielkie.

Podobne pytania

0 głosów
2 odpowiedzi 1,722 wizyt
0 głosów
0 odpowiedzi 556 wizyt

93,194 zapytań

142,206 odpowiedzi

322,051 komentarzy

62,519 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 3053p. - dia-Chann
  2. 2998p. - Łukasz Piwowar
  3. 2993p. - Łukasz Eckert
  4. 2970p. - CC PL
  5. 2930p. - Tomasz Bielak
  6. 2907p. - Łukasz Siedlecki
  7. 2890p. - rucin93
  8. 2801p. - Adrian Wieprzkowicz
  9. 2645p. - Mikbac
  10. 2485p. - Marcin Putra
  11. 2461p. - Michał Telesz
  12. 2418p. - Michal Drewniak
  13. 2156p. - Anonim 3619784
  14. 1733p. - rafalszastok
  15. 1650p. - Mariusz Fornal
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...