Блог

У меня есть код, написанный так, что, когда пользователь нажимает на иконку div-оболочки, значок, помещенный внутри, вращается. Значок имеет знак и превращается в крестик. Насколько я понимаю, код должен работать, когда пользователь нажимает в любом месте div. Тем не менее, код запускается только в том случае, если пользователь нажимает на значок. Я пытаюсь заставить его работать, если пользователь нажимает в любом месте div, а не только на сам значок. Я приложу html-разметку и логику, написанную для этого. Любые советы будут высоко оценены. Заранее спасибо.

 
const renderCards = (arr) => {
  const cards = arr
    .map((card) => {
      return `
                <div class="director__card">
                <div class="director__card--frontside">
                <img class="director__card--avatar" src="${card.image}" alt="director-img" />
                <h1 class="director__card--title">${card.name}</h1>
                <p class="director__card--role">${card.role}</p>
                <div class="director__card--iconBox">
                <img class="director__card--icon" src="${card.icon}" alt="icon" />
                </div>
                </div>
                <div class="director__card--backside">
                <h1 class="director__card--backTitle">${card.name}</h1>
                <p class="director__card--backQuote">${card.quote}</p>
                <div class="director__card--backIcons">
                <img class="director__card--backIcon" src="${card.twitterIcon}" alt="twitter"/>
                <img class="director__card--backIcon" src="${card.linkedinIcon}" alt="linked"/>
                </div>
                </div>
                </div>
        
        
        `;
    })
    .join("");

  directorsContainer.innerHTML = cards;
};

renderCards(directorsArr);

const toggleBtn = document.getElementsByClassName("director__card--iconBox");


Array.from(toggleBtn).forEach((el) =>
  el.addEventListener("click", (event) => {
    const card = event.target.closest(".director__card");
    const iconBox = event.target.closest(".director__card--iconBox");
    const icon = event.target.closest(".director__card--icon");
    card.classList.toggle("flipped");
    if (card.classList.contains("flipped")) {
      iconBox.classList.add("switched");
      icon.classList.add("rotate");
    } else {
      iconBox.classList.remove("switched");
      icon.classList.remove("rotate");
    }
  })
);