dodawanie zdarzeń do obiektów, błąd: Uncaught ReferenceError

dodawanie zdarzeń do obiektów, błąd: Uncaught ReferenceError
K2
  • Rejestracja:ponad 7 lat
  • Ostatnio:ponad 4 lata
  • Postów:19
0

Próbuję stworzyć zdarzenia dla zdjęć w galerii, ale dla kodu poniżej otrzymuje błąd:
Uncaught ReferenceError: gallery_thumbnail is not defined at HTMLImageElement.<anonymous> (gallery.js:6)

index.html

Kopiuj
<html>
	<head>
		<script src="gallery.js"></script>
	</head>

	<body onload="load_gallery();">
		<div id="gallery-image">
			<img src="img/gallery/1.jpg"/>	
		</div>
		<div id="gallery-thumbnails">
			<div class="thumbnail">
				<img src="img/gallery/1.jpg"/>
			</div>
			<div class="thumbnail">
				<img src="img/gallery/2.jpg"/>
			</div>
		</div>
	</body>
</html>

gallery.js

Kopiuj
function load_gallery() {
    var gallery_image = document.getElementById("gallery-image").querySelector("img");
    var gallery_thumbnails = document.getElementById("gallery-thumbnails").querySelectorAll("img");
    
    for(var i=0 ; i<gallery_thumbnails.length ; i++) {
        gallery_thumbnails[i].addEventListener("click", () => { gallery_image.src = gallery_thumbnail.src; });	
    }
}

Ma ktoś pomysł co robię nie tak?

Freja Draco
Freja Draco
  • Rejestracja:około 7 lat
  • Ostatnio:ponad 3 lata
  • Postów:3394
2

Jak mówi konsola: nigdzie nie definiujesz obiektu gallery_thumbnail, a próbujesz na nim operować.
Używasz funkcji strzałkowej, która uniemożliwia posłużenie się this, a to tutaj najsensowniejsze rozwiązanie.
Zrób tak:

Kopiuj
for(var i=0 ; i<gallery_thumbnails.length ; i++) {
  gallery_thumbnails[i].addEventListener("click", function() {gallery_image.src = this.src});  
}

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.