JavaScript Добавление EventListnera к фотографиям

Question

index.html имеет следующий вид:

<!DOCTYPE html>
<html lang="sv">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>JS-DOM övning</title>
        <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
        <div id="gallery">
            <div id="collection">
                <ul>
                    <li><img class = "collection_img" src="img/1.jpg" height="200px" width="200px" alt="collection 1"></li>
                    <li><img class = "collection_img" src="img/2.jpg" height="200px" width="200px" alt="collection 2"></li>
                    <li><img class = "collection_img" src="img/3.jpg" height="200px" width="200px" alt="collection 3"></li>
                </ul>
            </div>
            <div id="viewport"><img class = "viewport_img" height="600px" width="600px" src="" alt="galleri 1"></div>
        </div>
        <script src="js/main.js"></script>
    </body>
</html>

./js/main.js имеет следующий вид:

collection_images = document.getElementsByClassName("collection_img");
for (img of collection_images) {
    console.log(img.getAttribute("src"));
    img.addEventListener("click", function () {
        document.getElementsByClassName("viewport_img")[0].setAttribute("src", img.getAttribute("src"));
    });
}

Что я сделал не так при добалении EventListner'а к каждой фотографии, и итоговое поведение отличается от предпологаемого. Как я могу это исправить? Спасибо!

Answer 1

collection_images = document.getElementsByClassName("collection_img");

for (let img of collection_images) {
    img.addEventListener("click", function () {
        document.getElementsByClassName("viewport_img")[0].
        setAttribute("src", img.getAttribute("src"));
    });
}

Вы забыли let img. Это позволило сделать img не глобальной, а самостоятельной (локальной) для каждого img.

Короче. Вы таким образом сделали переопределение переменной img, что как раз логично было. Каждый раз переопределяли и сработала только последняя картинка, точнее ее src. Добавив let img вы избавляетесь от глобальности переменной, то есть меняете ее область видимости. Это позволило повесить событие на каждое изображение именно с его src.

БЛОГ НА HUSL

JavaScript Добавление EventListnera к фотографиям

Ответы (1 шт):