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

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

<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

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?

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:

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

1 użytkowników online, w tym zalogowanych: 0, gości: 1