javascript - 类型错误 : Cannot read property 'style' of undefined NodeJS

Question

我得到了具有相同宽度和高度的图像，并且 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文件

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。

Answer 1

在事件监听器函数中使用event.target来查找点击的图像。

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 %>" />