Я делаю галерею изображений с использованием vanilla JavaScript. Я пытаюсь сделать так, чтобы нажатие на миниатюру меняло атрибут src в теге img на класс gallery-highlight, обновляя изображение, показываемое пользователю. Но когда я открываю свой файл HTML в Firefox и нажимаю на миниатюру изображения, он ничего не делает. Мой JavaScript, похоже, ничего не делает со страницей. Как это исправить?
Вот что у меня:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width-device-width, initial-scale-1.0" />
<title>Image Gallery</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js"></script>
</head>
<body>
<img src="./efrain-big.jpg" class="gallery-highlight" alt="" />
<div class="room-preview">
<img src="./efrain-small.jpg" alt="" />
<img src="./heather-small.jpg" alt="" />
<img src="./jimmy-small.jpg" alt="" />
</div>
</body>
</html>
function imageGallery() {
const highlight = document.querySelector(".gallery-highlight");
const previews = document.querySelectorAll(".room-preview img");
previews.forEach(preview => {
preview.addEventListener("click", function() {
const smallSrc = this.src;
const bigSrc = smallSrc.replace('small', 'big');
highlight.src = bigSrc;
});
});
}
imageGallery();