Невозможно установить свойство undefined - Модальная галерея - Возможная проблема?

Я пытаюсь создать модальную галерею изображений для себя и сталкиваюсь с проблемой, когда div, назначенный моему модальному, не подбирается JS. Мой тег скрипта находится в конце файла, я определил div для переменной. Я думаю, это может быть проблема с областью действия, но я очень новичок:

var gallery = document.querySelectorAll('.modalImg');
var modal = document.querySelectorAll('#myModal');
var modalView = document.querySelectorAll('#img01');
var caption = document.querySelectorAll('#caption');

modalUp();

function modalUp(){
    for(var i = 0; i < gallery.length; i++) {

        gallery[i].addEventListener("click", function(){
            modal.style.display = "block";
            modalView.src = this.src;
            caption.innerHTML = this.alt;
        });
    };
};


<body>
    <div class = "gallery">
        <img class = "modalImg" src = "1.jpg" alt = "Fish">
        <img class = "modalImg" src = "2.jpg" alt = "Vroom">
    </div>
    <!-- Empty Modal Box -->
    <div class = "modal" id = "myModal">
        <img class = "modalView" id = "img01">
        <div id = "caption"></p>
    </div>
</body>
<script src = "modaltest.js" type = "text/javascript" charset = "utf-8" async defer></script>
</html>

Ошибка, которую я получаю, когда нажимаю одно из своих изображений: modaltest.js: 12 Uncaught TypeError: невозможно установить свойство display of undefined в HTMLImageElement. (modaltest.js: 12)

Я чувствую, что здесь не хватает чего-то базового, но никаких других вопросов, которые я мог бы найти, коррелирует.

javascript

10.06.2018 15:25

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

modal - это коллекция элементов (даже если он содержит только один элемент). Либо используйте

var modal = document.querySelector("#myModal");

или используйте извечный

var modal = document.getElementById('myModal');

чтобы найти только один элемент или получить доступ к первому элементу коллекции как

modal[0]

Использование querySelectorAll в селекторе идентификаторов бесполезно вдвойне. Даже если с этим идентификатором было несколько элементов, document.querySelectorAll всегда возвращал бы только первое совпадение.

— 10.06.2018 15:40

10.06.2018 15:28