HTML CSS JS item.classList.toggle() doesn't work-CodePudding

I am writing a program aiming to flip the card while it is clicked. The javascript code looks like this:

/* card flipping onclick */
import "./Stylesheets/FlipCardStyle.css"

var cards = document.querySelectorAll('.card');

[...cards].forEach((card)=>{
    card.addEventListener( 'click', function() {
        card.classList.toggle('flipped');
    });
});

And the CSS code works like this:

@import "GridLayouts.css";

.card {
    background: transparent;
    width: 117px;
    height: 200px;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    position: relative;
    cursor: pointer;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.wrapper-horizontal .card {
    float: left;
    margin-right: -47px;
    margin-bottom: 20px;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.card:hover {
    transform: rotateY(180deg) translate(0, 40px);
}

/* Position the front and back side */
.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.card-face-front {
    background: url("...") -234px 0px;
}

/* Style the back side */
.card-face-back {
    background: url("...");
    background-size: 100% 100%;
    transform: rotateY(180deg);
}

The HTML looks like this:

<!DOCTYPE html>

<link rel="stylesheet" href="Stylesheets/FlipCardStyle.css">
<link rel="stylesheet" href="Stylesheets/GridLayouts.css">
<link rel="stylesheet" href="Stylesheets/Buttons.css">

<html>

<div >

    <div >
        <div ></div>
        <div ></div>
    </div>

    <div >
        <div ></div>
        <div ></div>
    </div>

    <div >
        <div ></div>
        <div ></div>
    </div>

    <div >
        <div ></div>
        <div ></div>
    </div>

    <script src="./FlipCard.js"></script>

</div>

<button >Shuffle</button>

</html>

Theoretically, when I clicked the card, js script will invoke the .card.flipped, which would rotate the card over. But it doesn't work... My logic of the code comes from https://codepen.io/mondal10/pen/WNNEvjV, it workds on codepen but it doesn't seem to work for me.

Could anyone help me? Thanks a lot!!!

CodePudding user response：

The current included HTML is invalid, and you have a CSS selector that turns the cards around when hovered, I changed .card:hover to be .flipped because there was no flipped class to be toggled by the JavaScript. And I removed the invalid HTML, also replaced the background images that linked to nothing to colors, so it shows the cards in the following snippet.

var cards = document.querySelectorAll('.card');

[...cards].forEach((card) => {
  card.addEventListener('click', function() {
    card.classList.toggle('flipped');
  });
});

.card {
  background: transparent;
  width: 117px;
  height: 200px;
  perspective: 1000px;
  position: relative;
  cursor: pointer;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.wrapper-horizontal .card {
  float: left;
  margin: 10px;
  margin-bottom: 20px;
}


/* changed .card:hover to .flipped because there was no class to be toggled. */

.flipped {
  transform: rotateY(180deg) translate(0, 40px);
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  /* Safari */
  backface-visibility: hidden;
}

.card-face-front {
  background: red;
}

.card-face-back {
  background: blue;
  transform: rotateY(180deg);
}

<div >
  <div >
    <div ></div>
    <div ></div>
  </div>
  <div >
    <div ></div>
    <div ></div>
  </div>
  <div >
    <div ></div>
    <div ></div>
  </div>

  <div >
    <div ></div>
    <div ></div>
  </div>
  <script src="./FlipCard.js"></script>
</div>
<button >Shuffle</button>

CodePudding user response：

Maybe you copy all the source code from codepen without knowing the code format and structure

var cards = document.querySelectorAll('.card');

[...cards].forEach((card) => {
  card.addEventListener('click', function() {
    card.classList.toggle('is-flipped');
  });
});

body {
  font-family: sans-serif;
}

.scene {
  display: inline-block;
  width: 200px;
  height: 260px;
  /*   border: 1px solid #CCC; */
  margin: 40px 0;
  perspective: 600px;
}

.card {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transform-style: preserve-3d;
  transform-origin: center right;
  transition: transform 1s;
}

.card.is-flipped {
  transform: translateX(-100%) rotateY(-180deg);
}

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 260px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 40px;
  backface-visibility: hidden;
}

.card__face--front {
  background: crimson;
}

.card__face--back {
  background: slateblue;
  transform: rotateY(180deg);
}

<!doctype html>
<html  lang="">

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <meta property="og:title" content="">
  <meta property="og:type" content="">
  <meta property="og:url" content="">
  <meta property="og:image" content="">

  <link rel="manifest" href="site.webmanifest">
  <link rel="apple-touch-icon" href="icon.png">
  <!-- Place favicon.ico in the root directory -->

  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">

  <meta name="theme-color" content="#fafafa">
</head>

<body>

  <!-- Add your site or application content here -->
  <div >
    <div >
      <div >front</div>
      <div >back</div>
    </div>
  </div>
  <div >
    <div >
      <div >front</div>
      <div >back</div>
    </div>
  </div>
  <p>Click card to flip.</p>

  <script src="js/main.js"></script>


</body>

</html>