alt attribute undefined

Issue

Edit* The original post was changed to another topic.

I get a undefined when I try to print the alt attribute using innerHTML

This code by Gerardo Furtado, shows how it's working with a eventListener. I tried to use it in a function which I call in a condition:

function showName() {
  const altText = this.alt;
  text.innerHTML = altText;
}

condition:

if (isMatch === true) {
    applause.play();
    showName();
    removeOverlayHidden();
    setTimeout(function () {
    }, 1000);
  }

But while it is working with click listeners, it's not working anymore when used like above. Any idea I could solve this? I already tried several things.

Solution

Your problem is that you use this in recursive functions. In your event listener this may return the clicked element but in showName() it will only return a window object, which is not what you want.

So you will need to store this and pass it to all related functions. There are several ways of how to do this. In the code below, I am just passing this with a parameter, which is that.

const cards = document.querySelectorAll(".memory-card");
let firstCard, secondCard;
let hasFlippedCard = false;
let lockBoard = false;

const text = document.getElementById("show-name");
const myImage = document.querySelectorAll(".front-face");


function showName(that) {
  const altText = that.querySelector('.back-face').alt;
  text.innerHTML = altText;
}


function flipCard() {
  if (lockBoard) return;
  if (this === firstCard) return;
  // flipCardSound();
  this.classList.add("flip");

  if (!hasFlippedCard) {
    // first card click
    hasFlippedCard = true;
    firstCard = this;

    return;
  }

  // second card click
  hasFlippedCard = false;
  secondCard = this;
  checkForMatch(this);
}


function checkForMatch(that) {
  let isMatch = firstCard.dataset.framework === secondCard.dataset.framework;

  isMatch ? disableCards() : unflipCards();


  if (isMatch === true) {
    // applause.play(); // plays audio file when cards do match
    // removeOverlayHidden(); // Adds a blurry dark background
    showName(that); //returns "undefined"
    setTimeout(function() {}, 1000);
  }
}

function disableCards() {
  firstCard.removeEventListener("click", flipCard);
  secondCard.removeEventListener("click", flipCard);
  // resetBoard();
}

function unflipCards() {
  lockBoard = true;

  setTimeout(() => {
    firstCard.classList.remove("flip");
    secondCard.classList.remove("flip");

    resetBoard();
  }, 1500);
}

cards.forEach((card) => card.addEventListener("click", flipCard));

.memory-game {
  width: 1000px;
  height: 1000px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;
  perspective: 1000px;
}

.memory-card {
  width: calc(16% - 10px);
  height: calc(16% - 10px);
  margin: 8px;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  transform: scale(1);
  transform-style: preserve-3d;
  transition: transform 0.5s;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}
.front-face,
.back-face {
  width: 100%;
  height: 100%;
  padding: 0px;
  position: absolute;
  border-radius: 5px;
  background: #00e6a0;
  backface-visibility: hidden;
}
#show-name {
  color: white;
  position: absolute;
  top: 5%;
  left: 2%;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 3rem;
}

 <section class="memory-game">
   <div class="memory-card" data-framework="regula">
     <img class="front-face" src="img/people/regula.png" alt="Regula" />
     <img class="back-face" src="img/question.svg" alt="Question Badge" />
   </div>
   <div class="memory-card" data-framework="regula">
     <img class="front-face" src="img/people/regula.png" alt="Regula" />
     <img class="back-face" src="img/question.svg" alt="Question Badge" />
   </div>
 </section>

 <div id="show-name"></div>

However, you are using const altText = this.alt;. Even if this was correct, that wouldn't work since in your case this is just the parent element. I have just replaced it with const altText = that.querySelector('.back-face').alt;.

Answered By - Reza Saadati