Javascript：getElementsByClassName：如何只获取父母

Question

I have html like this:

<div class="item">
    <img class="item-image" src="${item.getImage()}"/>
    <p>${item.getName()}</p>
</div>

and Javascript:

var classname = document.getElementsByClassName("item");

for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('click', (e) => {
        addBorder(e.target);

    });
};

function addBorder(item) {
    if (item.tagName = 'DIV') {
        item.style.border = "3px solid red";
    }
}

When I click on item, it adds a red border. However if the click happened to touch the image or the paragraph, the red border is drawn around them. I tried to prevent it by adding the if condition inside addBorder , but it didn't help. Is there a way to only make the parent div red-bordered, even if the click happened to land inside p or img ?

Answer 1

Because item.tagName = 'DIV' means: assigning DIV to item.tagName . So you just need to replace item.tagName = 'DIV' with item.tagName === 'DIV' for comparing.

if (item.tagName === 'DIV') {
    item.style.border = "3px solid red";
}