Making an image flip on "click"

Nu2JavaS · May 26, 2020, 9:40pm

I put together a short bit of html coding to make an image flip on click. I copied sample coding from a website exactly as supplied, but although it works on the sample site, it refuses to work for me. What could possibly be the problem? Here is the coding:

<!DOCTYPE html>
<html lang="en">
  <head>
     <script>
	    var card = document.querySelector('.card');
		card.addEventListener( 'click', function() {
 			card.classList.toggle('is-flipped');
		});
	</script>
	<style type="text/css">
	body { font-family: sans-serif; }
	.scene {
  		width: 200px;
  		height: 260px;
  		perspective: 600px;
	}
	
	.card {
  		width: 100%;
  		height: 100%;
  		position: relative;
  		transition: transform 1s;
  		transform-style: preserve-3d;
	}
	
	.card__face {
  		position: absolute;
  		height: 100%;
  		width: 100%;
  		backface-visibility: hidden;
	}
	
	.card__face--front {
  		background: red;
	}

	.card__face--back {
  		background: blue;
  		transform: rotateY( 180deg );
	}
	
	.card.is-flipped {
  		transform: rotateY(180deg);
	}
	</style>
  </head>
  <body>
	<div class="scene">
  		<div class="card">
    		<div class="card__face card__face--front">FRONT</div>
    		<div class="card__face card__face--back">BACK</div>
  		</div>
	</div>
  </body>
</html>

Catalactics · May 26, 2020, 10:04pm

Hey, your problem here is that your JavaScript is running before your HTML is initialized, so essentially it’s trying to get an element that doesn’t exist yet. You can solve this by just putting your <script> tag all the way to the bottom of the body.

Nu2JavaS · May 26, 2020, 10:28pm

Wow, That was embarrassingly simple. Thanks.