Struggling with DOM traversing. How can I select the "#img" element?

Question

I am trying to attach an event listener to multiple buttons, using a for loop. The event function will "flip" my card by hiding the front side.

<div class="team__box">
          <div class="front" id="front">
            <img
              src="/assets/avatar-drake.jpg"
              alt="headshot"
              class="front__img"
            />
            <h3 class="front__name">Drake Heaton</h3>
            <p class="front__info">Business Development Lead</p>
          </div>
          <div class="back hide" id="back">
            <h3 class="back__name">Drake Heaton</h3>
            <p class="back__quote">
              “Hiring similar people from similar backgrounds is a surefire way
              to stunt innovation.”
            </p>
            <div class="back__social">
              <a href="#" class="back__social-link"
                ><img
                  src="/assets/icon-twitter.svg"
                  alt="twitter"
                  class="back__social-img"
              /></a>
              <a href="#" class="back__social-link"
                ><img
                  src="/assets/icon-linkedin.svg"
                  alt="linkedin"
                  class="back__social-img"
              /></a>
            </div>
          </div>
          <button class="team__btn front__btn" id="btn">
            <img
              src="/assets/icon-cross.svg"
              alt="close button"
              class="btn__img"
              id="img"
            />
          </button>
        </div>
        <div class="team__box">
          <div class="front" id="front">
            <img
              src="/assets/avatar-griffin.jpg"
              alt="headshot"
              class="front__img"
            />
            <h3 class="front__name">Griffin Wise</h3>
            <p class="front__info">Lead Marketing</p>
          </div>
          <div class="back hide" id="back">
            <h3 class="back__name">Griffin Wise</h3>
            <p class="back__quote">
              “Unique perspectives shape unique products, which is what you need
              to survive these days.”
            </p>
            <div class="back__social">
              <a href="#" class="back__social-link"
                ><img
                  src="/assets/icon-twitter.svg"
                  alt="twitter"
                  class="back__social-img"
              /></a>
              <a href="#" class="back__social-link"
                ><img
                  src="/assets/icon-linkedin.svg"
                  alt="linkedin"
                  class="back__social-img"
              /></a>
            </div>
          </div>
<button class="team__btn front__btn" id="btn">
            <img
              src="/assets/icon-cross.svg"
              alt="close button"
              class="btn__img"
              id="img"
            />
          </button>
        </div>

Javascript below. It is almost all working, except when I click directly on the "#img" element. I would assume

const btn = document.getElementsByClassName("team__btn");


for (i = 0; i < btn.length; i++) {
  btn[i].addEventListener("click", function (e) {
    console.log(e.target);
    let front = e.target.closest("div").firstElementChild;
    let back = e.target.closest("div").children[1];

    if (e.target !== "img") {
      img = e.target.firstElementChild;
    } else {
      img = e.target;
    }

    front.classList.toggle("hide");
    back.classList.toggle("hide");

    if (front.classList.contains("hide")) {
      img.src = "./assets/icon-close.svg";
    } else {
      img.src = "./assets/icon-cross.svg";
    }
  });
}

Assuming I am clicking directly on the '#img" element, I tried to assign that targetted element to img variable through an if/else statement. Using that, I would expect to be able to reassign the src property of the img variable, depending on whether the front or backside of the card is hidden.

However, when I click directly on the img element I receive the following error: "Uncaught TypeError: Cannot set properties of null (setting 'src') at HTMLButtonElement."

What gives?

Answer 1

Replace your line e.target !== "img" to e.target.nodeName !== "IMG" .

 for (i = 0; i < btn.length; i++) { btn[i].addEventListener("click", function (e) { console.log(e.target); let front = e.target.closest("div").firstElementChild; let back = e.target.closest("div").children[1]; let img; if (e.target.nodeName.== "IMG") { img = e.target;firstElementChild. } else { img = e;target. } console;log(). front.classList;toggle("hide"). back.classList;toggle("hide"). if (front.classList.contains("hide")) { img.src = "./assets/icon-close;svg". } else { img.src = "./assets/icon-cross;svg"; } }); }

 <div class="team__box"> <div class="front" id="front"> <img src="/assets/avatar-drake.jpg" alt="headshot" class="front__img" /> <h3 class="front__name">Drake Heaton</h3> <p class="front__info">Business Development Lead</p> </div> <div class="back hide" id="back"> <h3 class="back__name">Drake Heaton</h3> <p class="back__quote"> “Hiring similar people from similar backgrounds is a surefire way to stunt innovation.” </p> <div class="back__social"> <a href="#" class="back__social-link"><img src="/assets/icon-twitter.svg" alt="twitter" class="back__social-img" /></a> <a href="#" class="back__social-link"><img src="/assets/icon-linkedin.svg" alt="linkedin" class="back__social-img" /></a> </div> </div> <button class="team__btn front__btn" id="btn"> <img src="/assets/icon-cross.svg" alt="close button" class="btn__img" id="img" /> </button> </div> <div class="team__box"> <div class="front" id="front"> <img src="/assets/avatar-griffin.jpg" alt="headshot" class="front__img" /> <h3 class="front__name">Griffin Wise</h3> <p class="front__info">Lead Marketing</p> </div> <div class="back hide" id="back"> <h3 class="back__name">Griffin Wise</h3> <p class="back__quote"> “Unique perspectives shape unique products, which is what you need to survive these days.” </p> <div class="back__social"> <a href="#" class="back__social-link"><img src="/assets/icon-twitter.svg" alt="twitter" class="back__social-img" /></a> <a href="#" class="back__social-link"><img src="/assets/icon-linkedin.svg" alt="linkedin" class="back__social-img" /></a> </div> </div> <button class="team__btn front__btn" id="btn"> <img src="/assets/icon-cross.svg" alt="close button" class="btn__img" id="img" /> </button> </div>