Skip to content Skip to sidebar Skip to footer
Home / Addeventlistener / Css / Html / Javascript

How Can I Resolve My Problem About Flip Cards In Javascript?

Post a Comment
I have a problem with my Javascript code. I want to make a flip on my cards with a click on a button (in my case, the button called 'Result'). But my issue is when I Click on the f

Solution 1:

If you select all the buttons at the beginning, you're binding the function to all of them.

Instead, you need to find each button as a child of the card element in your foreach. At that point, you assign to the only result button (inside that specific card element) the first listener and to the only back button the other listener.

Fixed snippet below, I only edited the javascript part.

Side note: When you use querySelector or querySelectorAll and you want to access something by its id, like a css rule, you need to specify # first. Like you're doing for css classes where you use . as prefix.

const cards = document.querySelectorAll(".cards__single");

cards.forEach((card) => {
  // Use querySelector starting from card, not from document
  const resultsButton = card.querySelector("#flip-card-btn-turn-to-back");
  resultsButton.addEventListener("click", () => {
    card.classList.add('do-flip');
  });
  
  // Same for the back button, card.querySelector instead of document.querySelector
  const backButton = card.querySelector("#flip-card-btn-turn-to-front");
  backButton.addEventListener("click", () => {
    card.classList.remove('do-flip');
  });
});
p {
  line-height: 24px;
  margin-block-start: 1em;
  margin-block-end: 1em;
}

.tournaments-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.tournaments-section .tournament {
  flex: 33.333%;
  max-width: 33.3333%;
}

.cards {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-content: center;
  position: relative;
  perspective: 1000px;
  align-items: stretch;
}

.tournaments-section .cards {
  padding: 0 15px;
}

.cards__single {
  width: 100%;
  border-radius: 5px;
  box-shadow: 0 5px 18px rgb(0 0 0 / 60%);
  cursor: pointer;
  text-align: center;
  -webkit-transition: transform .6s;
  transform-style: preserve-3d;
  transition: .5s;
  -webkit-transition: .5s;
  position: relative;
  transition: transform .6s;
  -webkit-transition: transform .6s;
  background-color: rgba(27,40,56,.95);
  display: block;
  margin-bottom: 24px;
  border: 1px solid #41485a;
}

.cards__front, .cards__back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
}

.cards__front {
  height: 100%;
  transform: rotateX(0deg);
  -webkit-transform: rotateX(0deg);
}

.cards__front>.cards__front__header {
  position: relative;
  height: 100%;
  max-height: 250px;
  min-height: 250px;
  overflow: hidden;
  background-color: #373f50;
}

.cards__front>.cards__front__body {
  padding: 8px 16px;
  position: relative;
  border-top: 1px solid #41485a;
}

.cards__front>.cards__front__footer {
  padding: 8px 16px;
  display: flex;
  justify-content: space-around;
}

.pfl-button {
  background: none;
  border: 0;
  box-sizing: border-box;
  padding: 1em;
  box-shadow: inset 0 0 0 2px #ffffff;
  background-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: inherit;
  font-weight: 700;
  position: relative;
  vertical-align: middle;
  text-transform: uppercase;
}

.pfl-button::before, .pfl-button::after {
  box-sizing: inherit;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
}

.draw {
  transition: color 0.25s;
}

.draw::before, .draw::after {
  border: 2px solid transparent;
  width: 0;
  height: 0;
}

.draw::before {
  top: 0;
  left: 0;
}

.meet::after {
  top: 0;
  left: 0;
}

.cards__single .pfl-button {
  padding: 1em;
  background-color: rgba(255, 255, 255, 0.2);
}

.cards__back {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  position: absolute;
  text-align: center;
  right: 0;
  left: 0;
  top: 10px;
}

.cards__results {
  display: flex;
  justify-content: space-around;
  margin-bottom: 15px;
  text-transform: uppercase;
}

.do-flip {
  -o-transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}
<div class="tournaments-section">

  <div class="tournament">
    <div class="cards">
      <div class="cards__single">
        <div class="cards__front">
          <div class="cards__front__header">
            <div class="image">
              <img class="cards__image" src="https://media-exp3.licdn.com/dms/image/C4D1BAQGJH3oVZgtvJA/company-background_10000/0/1569871136613?e=2159024400&v=beta&t=1O1eAL83swfIbvGoF1Rs5M1XES_1lgTN60tWBWgvAr0" alt="PFL - 06/06/21 - Dragon Ball Fighterz">
            </div>
            <div class="cover">
              <h3 class="text" tabindex="0">Title 1</h3>
            </div>
          </div>
          <div class="cards__front__body">
            Hello World 1
          </div>
          <div class="cards__front__footer">
            <button id="flip-card-btn-turn-to-back" class="pfl-button draw meet results-button">Results</button>
            <a href="#" target="_blank" class="pfl-button draw meet">
              Button 2
            </a>
            <a href="#" target="_blank" class="pfl-button draw meet">Button 3</a>
          </div>
        </div>
        <div class="cards__back">
          <div class="cards__results">
            <div class="cards__top">
              <h3>Title</h3>
            </div>
          </div>
          <div class="cards__front__footer">
            <button id="flip-card-btn-turn-to-front" class="pfl-button draw meet back-button">Go back</button>
          </div>
        </div>
      </div>
    </div>
  </div>


  <div class="tournament">
    <div class="cards">
      <div class="cards__single">
        <div class="cards__front">
          <div class="cards__front__header">
            <div class="image">
              <img class="cards__image" src="https://media-exp3.licdn.com/dms/image/C4D1BAQGJH3oVZgtvJA/company-background_10000/0/1569871136613?e=2159024400&v=beta&t=1O1eAL83swfIbvGoF1Rs5M1XES_1lgTN60tWBWgvAr0" alt="PFL - 10/06/21 - Guilty Gear Strive">
            </div>
            <div class="cover">
              <h3 class="text" tabindex="0">Title</h3>
            </div>
          </div>
          <div class="cards__front__body">
            Hello World 2
          </div>
          <div class="cards__front__footer">
            <button id="flip-card-btn-turn-to-back" class="pfl-button draw meet results-button">Results</button>
          </div>
        </div>
        <div class="cards__back">
          <div class="cards__results">
            <div class="cards__top">
              <h3>Title 2</h3>

            </div>
            <div class="cards__ranking">
              <h3>Classement</h3>
            </div>
          </div>
          <div class="cards__front__footer">
            <button id="flip-card-btn-turn-to-front" class="pfl-button draw meet back-button">Go back</button>
          </div>
        </div>
      </div>
    </div>
  </div>


  <div class="tournament">
    <div class="cards">
      <div class="cards__single">
        <div class="cards__front">
          <div class="cards__front__header">
            <div class="image">
              <img class="cards__image" src="https://media-exp3.licdn.com/dms/image/C4D1BAQGJH3oVZgtvJA/company-background_10000/0/1569871136613?e=2159024400&v=beta&t=1O1eAL83swfIbvGoF1Rs5M1XES_1lgTN60tWBWgvAr0">
            </div>
            <div class="cover">
              <h3 class="text" tabindex="0">Title 3</h3>
            </div>
          </div>
          <div class="cards__front__body">
            Hello World 3
          </div>
          <div class="cards__front__footer">
            <button id="flip-card-btn-turn-to-back" class="pfl-button draw meet results-button">Results</button>
            <a href="https://smash.gg/tournament/parisienne-fighting-ligue/event/pfl-10-06-21-dragon-ball-fighterz/overview" target="_blank" class="pfl-button draw meet">
              Bracket
            </a>
          </div>
        </div>
        <div class="cards__back">
          <div class="cards__results">
            <div class="cards__top">
              <h3>Title</h3>                                 </div>
            <div class="cards__ranking">
              <h3>Standings</h3>
            </div>
          </div>
          <div class="cards__front__footer">
            <button id="flip-card-btn-turn-to-front" class="pfl-button draw meet back-button">Go back</button>
          </div>
        </div>
      </div>
    </div>
  </div>





</div>

Solution 2:

document.querySelectorAll returns array. Array have no method addEventListener. Yoy need to do this:

resultsButton.map(button => {
  button.addEventListener("click", () => {
    card.classList.add('do-flip');
  });
});

Solution 3:

Like mentioned by other you are selecting all buttons and add the same action.

If you select the buttons from within the card, you get the buttons per card. Also note that querySelectorAll() on a class will return an array/ object thus having to use [0] to select the button index.

const cards = document.querySelectorAll(".cards__single");

cards.forEach((card) => {
  let resultsButton = card.querySelectorAll(".results-button")[0];
  let backButton = card.querySelectorAll(".back-button")[0];

  if (resultsButton) {
    resultsButton.addEventListener("click", () => {
      card.classList.add('do-flip');
    });
  }

  if (backButton) {
    backButton.addEventListener("click", () => {
      card.classList.remove('do-flip');
    });
  }
});
p {
  line-height: 24px;
  margin-block-start: 1em;
  margin-block-end: 1em;
}

.tournaments-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.tournaments-section .tournament {
  flex: 33.333%;
  max-width: 33.3333%;
}

.cards {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-content: center;
  position: relative;
  perspective: 1000px;
  align-items: stretch;
}

.tournaments-section .cards {
  padding: 0 15px;
}

.cards__single {
  width: 100%;
  border-radius: 5px;
  box-shadow: 0 5px 18px rgb(0 0 0 / 60%);
  cursor: pointer;
  text-align: center;
  -webkit-transition: transform .6s;
  transform-style: preserve-3d;
  transition: .5s;
  -webkit-transition: .5s;
  position: relative;
  transition: transform .6s;
  -webkit-transition: transform .6s;
  background-color: rgba(27, 40, 56, .95);
  display: block;
  margin-bottom: 24px;
  border: 1px solid #41485a;
}

.cards__front,
.cards__back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
}

.cards__front {
  height: 100%;
  transform: rotateX(0deg);
  -webkit-transform: rotateX(0deg);
}

.cards__front>.cards__front__header {
  position: relative;
  height: 100%;
  max-height: 250px;
  min-height: 250px;
  overflow: hidden;
  background-color: #373f50;
}

.cards__front>.cards__front__body {
  padding: 8px 16px;
  position: relative;
  border-top: 1px solid #41485a;
}

.cards__front>.cards__front__footer {
  padding: 8px 16px;
  display: flex;
  justify-content: space-around;
}

.pfl-button {
  background: none;
  border: 0;
  box-sizing: border-box;
  padding: 1em;
  box-shadow: inset 0 0 0 2px #ffffff;
  background-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: inherit;
  font-weight: 700;
  position: relative;
  vertical-align: middle;
  text-transform: uppercase;
}

.pfl-button::before,
.pfl-button::after {
  box-sizing: inherit;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
}

.draw {
  transition: color 0.25s;
}

.draw::before,
.draw::after {
  border: 2px solid transparent;
  width: 0;
  height: 0;
}

.draw::before {
  top: 0;
  left: 0;
}

.meet::after {
  top: 0;
  left: 0;
}

.cards__single .pfl-button {
  padding: 1em;
  background-color: rgba(255, 255, 255, 0.2);
}

.cards__back {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  position: absolute;
  text-align: center;
  right: 0;
  left: 0;
  top: 10px;
}

.cards__results {
  display: flex;
  justify-content: space-around;
  margin-bottom: 15px;
  text-transform: uppercase;
}

.do-flip {
  -o-transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}
<div class="tournaments-section">

  <div class="tournament">
    <div class="cards">
      <div class="cards__single">
        <div class="cards__front">
          <div class="cards__front__header">
            <div class="image">
              <img class="cards__image" src="https://media-exp3.licdn.com/dms/image/C4D1BAQGJH3oVZgtvJA/company-background_10000/0/1569871136613?e=2159024400&v=beta&t=1O1eAL83swfIbvGoF1Rs5M1XES_1lgTN60tWBWgvAr0" alt="PFL - 06/06/21 - Dragon Ball Fighterz">
            </div>
            <div class="cover">
              <h3 class="text" tabindex="0">Title 1</h3>
            </div>
          </div>
          <div class="cards__front__body">
            Hello World 1
          </div>
          <div class="cards__front__footer">
            <button id="flip-card-btn-turn-to-back" class="pfl-button draw meet results-button">Results</button>
            <a href="#" target="_blank" class="pfl-button draw meet">
              Button 2
            </a>
            <a href="#" target="_blank" class="pfl-button draw meet">Button 3</a>
          </div>
        </div>
        <div class="cards__back">
          <div class="cards__results">
            <div class="cards__top">
              <h3>Title</h3>
            </div>
          </div>
          <div class="cards__front__footer">
            <button id="flip-card-btn-turn-to-front" class="pfl-button draw meet back-button">Go back</button>
          </div>
        </div>
      </div>
    </div>
  </div>


  <div class="tournament">
    <div class="cards">
      <div class="cards__single">
        <div class="cards__front">
          <div class="cards__front__header">
            <div class="image">
              <img class="cards__image" src="https://media-exp3.licdn.com/dms/image/C4D1BAQGJH3oVZgtvJA/company-background_10000/0/1569871136613?e=2159024400&v=beta&t=1O1eAL83swfIbvGoF1Rs5M1XES_1lgTN60tWBWgvAr0" alt="PFL - 10/06/21 - Guilty Gear Strive">
            </div>
            <div class="cover">
              <h3 class="text" tabindex="0">Title</h3>
            </div>
          </div>
          <div class="cards__front__body">
            Hello World 2
          </div>
          <div class="cards__front__footer">
            <button id="flip-card-btn-turn-to-back" class="pfl-button draw meet results-button">Results</button>
          </div>
        </div>
        <div class="cards__back">
          <div class="cards__results">
            <div class="cards__top">
              <h3>Title 2</h3>

            </div>
            <div class="cards__ranking">
              <h3>Classement</h3>
            </div>
          </div>
          <div class="cards__front__footer">
            <button id="flip-card-btn-turn-to-front" class="pfl-button draw meet back-button">Go back</button>
          </div>
        </div>
      </div>
    </div>
  </div>


  <div class="tournament">
    <div class="cards">
      <div class="cards__single">
        <div class="cards__front">
          <div class="cards__front__header">
            <div class="image">
              <img class="cards__image" src="https://media-exp3.licdn.com/dms/image/C4D1BAQGJH3oVZgtvJA/company-background_10000/0/1569871136613?e=2159024400&v=beta&t=1O1eAL83swfIbvGoF1Rs5M1XES_1lgTN60tWBWgvAr0">
            </div>
            <div class="cover">
              <h3 class="text" tabindex="0">Title 3</h3>
            </div>
          </div>
          <div class="cards__front__body">
            Hello World 3
          </div>
          <div class="cards__front__footer">
            <button id="flip-card-btn-turn-to-back" class="pfl-button draw meet results-button">Results</button>
            <a href="https://smash.gg/tournament/parisienne-fighting-ligue/event/pfl-10-06-21-dragon-ball-fighterz/overview" target="_blank" class="pfl-button draw meet">
              Bracket
            </a>
          </div>
        </div>
        <div class="cards__back">
          <div class="cards__results">
            <div class="cards__top">
              <h3>Title</h3>
            </div>
            <div class="cards__ranking">
              <h3>Standings</h3>
            </div>
          </div>
          <div class="cards__front__footer">
            <button id="flip-card-btn-turn-to-front" class="pfl-button draw meet back-button">Go back</button>
          </div>
        </div>
      </div>
    </div>
  </div>





</div>

You may like these posts

Post a Comment for "How Can I Resolve My Problem About Flip Cards In Javascript?"