So I made this,

var Coin = document.getElementById("coin");

Coin.onclick = function() {
    Coin.style.webkitTransform = "rotateY(1800deg)";
    Coin.style.MozTransform = "rotateY(1800deg)";
    Coin.style.msTransform = "rotateY(1800deg)";
    Coin.style.OTransform = "rotateY(1800deg)";
    Coin.style.transform = "rotateY(1800deg)";
}

Found at: /

And in it, a coin spins. However, it only fires once. The first time I click it. It doesn't fire again after. Help!

So I made this,

var Coin = document.getElementById("coin");

Coin.onclick = function() {
    Coin.style.webkitTransform = "rotateY(1800deg)";
    Coin.style.MozTransform = "rotateY(1800deg)";
    Coin.style.msTransform = "rotateY(1800deg)";
    Coin.style.OTransform = "rotateY(1800deg)";
    Coin.style.transform = "rotateY(1800deg)";
}

Found at: https://jsfiddle/dkjufqn0/

And in it, a coin spins. However, it only fires once. The first time I click it. It doesn't fire again after. Help!

• javascript
• html
• css
• onclick

Share Improve this question Follow asked Jan 22, 2016 at 12:39 Dammy CheeDammy Chee 851010 bronze badges 2

• 1 The event fires every time you click it, you should make the degree a variable and change it with every click. – A1rPun Commented Jan 22, 2016 at 12:43
• 2 It doesn't fires only once. It acutally fires every time you click it. It sets the rotation to 1800deg every time, that's it. So after the first time, you just can't notice the effect because the rotation is already set to 1800deg. – Jeremy Thille Commented Jan 22, 2016 at 12:57

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

Every time you click the coin it remains at the 1800 degrees, to rotate it on each click you need to increment its degrees as in below example:

https://jsfiddle/dkjufqn0/1/

var Coin = document.getElementById("coin");
var degrees = 0;
Coin.onclick = function() {
  degrees += 1800;
  console.log(degrees)
  Coin.style.webkitTransform = "rotateY(" + degrees + "deg)";
  Coin.style.MozTransform = "rotateY(" + degrees + "deg)";
  Coin.style.msTransform = "rotateY(" + degrees + "deg)";
  Coin.style.OTransform = "rotateY(" + degrees + "deg)";
  Coin.style.transform = "rotateY(" + degrees + "deg)";
}

body {
  -webkit-transform: perspective(500px);
  -webkit-transform-style: preserve-3d;
}

.coin {
  background-image: url("http://coins.thefuntimesguide./images/blogs/presidential-dollar-coin-reverse-statue-of-liberty-public-domain.png");
  background-size: 100% 100%;
  border-radius: 100%;
  height: 100px;
  margin: 50px auto;
  position: relative;
  width: 100px;
  -webkit-transition: 2s linear;
  -webkit-transform-style: preserve-3d;
}

<div class="coin" id="coin"></div>

Are you sure about that? place a console.log(in that handler to check it)

I think your code is fine, except the rotateY calls seem to do nothing after the first click because you always set it to the same value.