Ошибка типа: невозможно прочитать свойство 'style' из неопределенного NodeJS - PullRequest
Новая
       6

Ошибка типа: невозможно прочитать свойство 'style' из неопределенного NodeJS

0 голосов
/ 08 марта 2020

Я получил изображения с одинаковой шириной и высотой, и onclick они должны увеличиться, поэтому я создал функцию с eventlistener, но теперь она говорит мне, что стиль не определен, и я не вижу вопрос. Я устанавливаю стили внутри тега img, а также без стиля. 

<img class="painting" src="<%= post.paintingsP %>" />
    <img class="painting" style="max-width: 20%; min-width: 300px; height: 250px;"src="<%= post.paintingsP2 %>" />

js file 

const paint = document.getElementsByClassName('painting');
let flag = true;

for (var i = 0; i < paint.length; i++) {
    paint[i].style.maxWidth = '20%';
    paint[i].style.height = '250px';
    paint[i].style.minWidth = '300px';

    paint[i].addEventListener('click', () => {
        if (flag == true && window.innerWidth >= 769) {
            paint[i].style.maxWidth = '95vw';
            paint[i].style.height = 'auto';

            flag = false;
        } else if (flag == true && window.innerWidth < 769) {

        } else {
            paint[i].style.maxWidth = '20%';
            paint[i].style.minWidth = '300px';
            paint[i].style.height = 'auto';
            flag = true;
        }
    })
}

Если я пытаюсь использовать getelementById, все работает нормально, но я не хочу для каждого изображения eventlistener.

1 Ответ

1 голос
/ 08 марта 2020

Используйте event.target в функции EventListener, чтобы найти изображение, по которому щелкнули. 

const paint = document.getElementsByClassName('painting');
let flag = true;

for (var i = 0; i < paint.length; i++) {

    paint[i].style.maxWidth = '20%';
    paint[i].style.height = '250px';
    paint[i].style.minWidth = '300px';

    paint[i].addEventListener('click', (event) => {
    console.log(event.target)
        if (flag == true && window.innerWidth >= 769) {
           event.target.style.maxWidth = '95vw';
           event.target.style.height = 'auto';

            flag = false;
        } else if (flag == true && window.innerWidth < 769) {

        } else {
            event.target.style.maxWidth = '20%';
            event.target.style.minWidth = '300px';
            event.target.style.height = 'auto';
            flag = true;
        }
    })
}
<img class="painting" src="<%= post.paintingsP %>" />
    <img class="painting" style="max-width: 20%; min-width: 300px; height: 250px;"src="<%= post.paintingsP2 %>" />
...