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

March 31, 2024 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 documentconst 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.querySelectorconst 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: 015px;
}

.cards__single {
  width: 100%;
  border-radius: 5px;
  box-shadow: 05px18pxrgb(000 / 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: 8px16px;
  position: relative;
  border-top: 1px solid #41485a;
}

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

.pfl-button {
  background: none;
  border: 0;
  box-sizing: border-box;
  padding: 1em;
  box-shadow: inset 0002px#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);
}

<divclass="tournaments-section"><divclass="tournament"><divclass="cards"><divclass="cards__single"><divclass="cards__front"><divclass="cards__front__header"><divclass="image"><imgclass="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><divclass="cover"><h3class="text"tabindex="0">Title 1</h3></div></div><divclass="cards__front__body">
            Hello World 1
          </div><divclass="cards__front__footer"><buttonid="flip-card-btn-turn-to-back"class="pfl-button draw meet results-button">Results</button><ahref="#"target="_blank"class="pfl-button draw meet">
              Button 2
            </a><ahref="#"target="_blank"class="pfl-button draw meet">Button 3</a></div></div><divclass="cards__back"><divclass="cards__results"><divclass="cards__top"><h3>Title</h3></div></div><divclass="cards__front__footer"><buttonid="flip-card-btn-turn-to-front"class="pfl-button draw meet back-button">Go back</button></div></div></div></div></div><divclass="tournament"><divclass="cards"><divclass="cards__single"><divclass="cards__front"><divclass="cards__front__header"><divclass="image"><imgclass="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><divclass="cover"><h3class="text"tabindex="0">Title</h3></div></div><divclass="cards__front__body">
            Hello World 2
          </div><divclass="cards__front__footer"><buttonid="flip-card-btn-turn-to-back"class="pfl-button draw meet results-button">Results</button></div></div><divclass="cards__back"><divclass="cards__results"><divclass="cards__top"><h3>Title 2</h3></div><divclass="cards__ranking"><h3>Classement</h3></div></div><divclass="cards__front__footer"><buttonid="flip-card-btn-turn-to-front"class="pfl-button draw meet back-button">Go back</button></div></div></div></div></div><divclass="tournament"><divclass="cards"><divclass="cards__single"><divclass="cards__front"><divclass="cards__front__header"><divclass="image"><imgclass="cards__image"src="https://media-exp3.licdn.com/dms/image/C4D1BAQGJH3oVZgtvJA/company-background_10000/0/1569871136613?e=2159024400&v=beta&t=1O1eAL83swfIbvGoF1Rs5M1XES_1lgTN60tWBWgvAr0"></div><divclass="cover"><h3class="text"tabindex="0">Title 3</h3></div></div><divclass="cards__front__body">
            Hello World 3
          </div><divclass="cards__front__footer"><buttonid="flip-card-btn-turn-to-back"class="pfl-button draw meet results-button">Results</button><ahref="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><divclass="cards__back"><divclass="cards__results"><divclass="cards__top"><h3>Title</h3></div><divclass="cards__ranking"><h3>Standings</h3></div></div><divclass="cards__front__footer"><buttonid="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: 015px;
}

.cards__single {
  width: 100%;
  border-radius: 5px;
  box-shadow: 05px18pxrgb(000 / 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: 8px16px;
  position: relative;
  border-top: 1px solid #41485a;
}

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

.pfl-button {
  background: none;
  border: 0;
  box-sizing: border-box;
  padding: 1em;
  box-shadow: inset 0002px#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);
}

<divclass="tournaments-section"><divclass="tournament"><divclass="cards"><divclass="cards__single"><divclass="cards__front"><divclass="cards__front__header"><divclass="image"><imgclass="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><divclass="cover"><h3class="text"tabindex="0">Title 1</h3></div></div><divclass="cards__front__body">
            Hello World 1
          </div><divclass="cards__front__footer"><buttonid="flip-card-btn-turn-to-back"class="pfl-button draw meet results-button">Results</button><ahref="#"target="_blank"class="pfl-button draw meet">
              Button 2
            </a><ahref="#"target="_blank"class="pfl-button draw meet">Button 3</a></div></div><divclass="cards__back"><divclass="cards__results"><divclass="cards__top"><h3>Title</h3></div></div><divclass="cards__front__footer"><buttonid="flip-card-btn-turn-to-front"class="pfl-button draw meet back-button">Go back</button></div></div></div></div></div><divclass="tournament"><divclass="cards"><divclass="cards__single"><divclass="cards__front"><divclass="cards__front__header"><divclass="image"><imgclass="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><divclass="cover"><h3class="text"tabindex="0">Title</h3></div></div><divclass="cards__front__body">
            Hello World 2
          </div><divclass="cards__front__footer"><buttonid="flip-card-btn-turn-to-back"class="pfl-button draw meet results-button">Results</button></div></div><divclass="cards__back"><divclass="cards__results"><divclass="cards__top"><h3>Title 2</h3></div><divclass="cards__ranking"><h3>Classement</h3></div></div><divclass="cards__front__footer"><buttonid="flip-card-btn-turn-to-front"class="pfl-button draw meet back-button">Go back</button></div></div></div></div></div><divclass="tournament"><divclass="cards"><divclass="cards__single"><divclass="cards__front"><divclass="cards__front__header"><divclass="image"><imgclass="cards__image"src="https://media-exp3.licdn.com/dms/image/C4D1BAQGJH3oVZgtvJA/company-background_10000/0/1569871136613?e=2159024400&v=beta&t=1O1eAL83swfIbvGoF1Rs5M1XES_1lgTN60tWBWgvAr0"></div><divclass="cover"><h3class="text"tabindex="0">Title 3</h3></div></div><divclass="cards__front__body">
            Hello World 3
          </div><divclass="cards__front__footer"><buttonid="flip-card-btn-turn-to-back"class="pfl-button draw meet results-button">Results</button><ahref="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><divclass="cards__back"><divclass="cards__results"><divclass="cards__top"><h3>Title</h3></div><divclass="cards__ranking"><h3>Standings</h3></div></div><divclass="cards__front__footer"><buttonid="flip-card-btn-turn-to-front"class="pfl-button draw meet back-button">Go back</button></div></div></div></div></div></div>

Html5 News

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

Solution 1:

Solution 2:

Solution 3:

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