Improving of JS function for different ID (flip cadrs)

Question

I'am trying to build up the site, and I had a problem with JS function. So the question is, do you have any thoughts about improving this JS fragment for work with different ID's (means If I click on button the exactly card will flip (the site will contains probably 10 cards)), pls help. Thanks for you attention

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('flip-card-btn-turn-to-back1').onclick = function() {

    document.getElementById('flip-card1').classList.toggle('do-flip');
  };
  document.getElementById('flip-card-btn-turn-to-front1').onclick = function() {
    document.getElementById('flip-card1').classList.toggle('do-flip');
  };

  document.getElementById('flip-card-btn-turn-to-back2').onclick = function() {
    document.getElementById('flip-card2').classList.toggle('do-flip');
  };
  document.getElementById('flip-card-btn-turn-to-front2').onclick = function() {
    document.getElementById('flip-card2').classList.toggle('do-flip');
  };

});

.flip-card-3D-wrapper {
  width: 55vw;
  height: 50vh;
  max-width: 300px;
  position: relative;
  -o-perspective: 900px;
  -webkit-perspective: 900px;
  -ms-perspective: 900px;
  perspective: 900px;
  margin: auto;
}

#flip-card1,
#flip-card2 {
  width: 100%;
  height: 100%;
  text-align: left;
  position: relative;
  -o-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  -o-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.do-flip {
  -o-transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}

#flip-card-btn-turn-to-back1,
#flip-card-btn-turn-to-front1,
#flip-card-btn-turn-to-back2,
#flip-card-btn-turn-to-front2 {
  background: transparent;
  font-size: 14pt;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  text-align: center;
  border: 0;
  border-top: 3px solid white;
}

#flip-card1 .flip-card-front1,
#flip-card1 .flip-card-back1,
#flip-card2 .flip-card-front2,
#flip-card2 .flip-card-back2 {
  width: 100%;
  height: 100%;
  position: absolute;
  -o-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 2;
  -webkit-box-shadow: 5px 6px 32px 2px rgba(133, 133, 133, 0.71);
  -moz-box-shadow: 5px 6px 32px 2px rgba(133, 133, 133, 0.71);
  box-shadow: 5px 6px 32px 2px rgba(133, 133, 133, 0.71);
}

#flip-card1 .flip-card-front1,
#flip-card2 .flip-card-front2 {
  background: transparent;
}

#flip-card1 .flip-card-back1,
#flip-card2 .flip-card-back2 {
  background: transparent;
  -o-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

#flip-card1 .flip-card-front1 p,
#flip-card1 .flip-card-back1 p,
#flip-card2 .flip-card-front2 p,
#flip-card2 .flip-card-back2 p {
  color: white;
  display: block;
  position: relative;
  font-size: 400%;
  text-align: left;
  font-family: inherit;
}

<div class="w-90 col-md-12 p-lg-5">
  <div class="card-group">
    <div class="card border-0" style="background-color: transparent;">
      <div class="card-body">
        <div class="flip-card-3D-wrapper">
          <div id="flip-card1">
            <div class="flip-card-front1">
              <p>front</p><button id="flip-card-btn-turn-to-back1">back</button></div>
            <div class="flip-card-back1">
              <p>Back</p>
              <button id="flip-card-btn-turn-to-front1">front</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card border-0" style="background-color: transparent;">
      <div class="card-body" style="border-left: solid; border-right: solid">
        <div class="flip-card-3D-wrapper">
          <div id="flip-card2">
            <div class="flip-card-front2">
              <p>front</p><button id="flip-card-btn-turn- 
                    to-back2">back</button></div>
            <div class="flip-card-back2">
              <p>Back</p>
              <button id="flip-card-btn-turn-to-front2">front</button>
            </div </div>
          </div>
        </div>

If you add a snippet, please make sure it works. – phuzi Jun 10 '22 at 15:31 — phuzi, Jun 10 '22 at 15:31

score 0 · Accepted Answer · answered Jun 10 '22 at 15:59

I have some doubts about the structure of the HTML, but for your question, an elegant solution may be this.

Identify your buttons with single class instead of different id

<div class="w-90 col-md-12 p-lg-5">
  <div class="card-group">
    <div class="card border-0" style="background-color: transparent;">
      <div class="card-body">
        <div class="flip-card-3D-wrapper">
          <div id="flip-card1">
            <div class="flip-card-front1">
              <p>front</p>
              <button class="flip-card-btn">back</button>
            </div>
            <div class="flip-card-back1">
              <p>Back</p>
              <button class="flip-card-btn">front</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card border-0" style="background-color: transparent;">
      <div class="card-body" style="border-left: solid; border-right: solid">
        <div class="flip-card-3D-wrapper">
          <div id="flip-card2">
            <div class="flip-card-front2">
              <p>front</p>
              <button class="flip-card-btn">back</button>
            </div>
            <div class="flip-card-back2">
              <p>Back</p>
              <button class="flip-card-btn">front</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Obviously change your CSS to

.flip-card-3D-wrapper {
  width: 55vw;
  height: 50vh;
  max-width: 300px;
  position: relative;
  -o-perspective: 900px;
  -webkit-perspective: 900px;
  -ms-perspective: 900px;
  perspective: 900px;
  margin: auto;
}
#flip-card1, #flip-card2 {
  width: 100%;
  height: 100%;
  text-align: left;
  position: relative;
  -o-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  -o-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.do-flip {
  -o-transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}
.flip-card-btn {
  background: transparent;
  font-size: 14pt;
  position:absolute;
  bottom:0;
  right:0;
  left:0;
  text-align:center;
  border: 0;
  border-top: 3px solid white;
}
#flip-card1 .flip-card-front1, #flip-card1 .flip-card-back1, #flip-card2 .flip-card-front2, #flip-card2 .flip-card-back2{
  width: 100%;
  height: 100%;
  position: absolute;
  -o-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 2;
  -webkit-box-shadow: 5px 6px 32px 2px rgba(133,133,133,0.71);
  -moz-box-shadow: 5px 6px 32px 2px rgba(133,133,133,0.71);
  box-shadow: 5px 6px 32px 2px rgba(133,133,133,0.71);
}
#flip-card1 .flip-card-front1, #flip-card2 .flip-card-front2 {
    background: transparent;
}
#flip-card1 .flip-card-back1, #flip-card2 .flip-card-back2 {
    background: transparent;
    -o-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
#flip-card1 .flip-card-front1 p, #flip-card1 .flip-card-back1 p, #flip-card2 .flip-card-front2 p, #flip-card2 .flip-card-back2 p {
  color: white;
  display: block;
  position: relative;
  font-size: 400%;
  text-align: left;
  font-family: inherit;
}

And finally use a simple javascript code to flip your cards

document.addEventListener('DOMContentLoaded', function() {
  const list = document.getElementsByClassName('flip-card-btn');
  [].forEach.call(list, function(e) {
    e.onclick = function() {
      document.getElementById(this.parentNode.parentNode.id).classList.toggle('do-flip');
    }
  });
});

Check this sample

IT WORKS, much thanks, wish you all the best in your life – Oleksii Vasylenko Jun 11 '22 at 20:40 — Oleksii Vasylenko, Jun 11 '22 at 20:40

Improving of JS function for different ID (flip cadrs)

1 Answers1