I am dealing with the following HTML code:
<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";
}
}
Whenever I click on an item, a red border is added. However, if my click lands on the image or the paragraph within the item, the red border is drawn around them as well. I attempted to prevent this by adding an if statement in the addBorder function, but unfortunately it did not work. Is there a way to ensure that only the parent div gets the red border, even if the click falls inside the p or img elements?