que - Javascript onclick solo funciona una vez

que es javascript

Question

Así que hice esto,

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)";
}

Encontrado en: https://jsfiddle.net/dkjufqn0/

Y en ella, una moneda gira. Sin embargo, solo dispara una vez. La primera vez que hago clic en él. No vuelve a disparar después. ¡Ayuda!

Answer 1

¿Está usted seguro de eso? coloque un console.log (en ese controlador para verificarlo)

Creo que su código está bien, excepto que las llamadas rotativas parecen no hacer nada después del primer clic porque siempre lo configura con el mismo valor.

Answer 2

Cada vez que haces clic en la moneda, permanece en los 1800 grados, para rotarla en cada clic que necesites para incrementar sus grados, como en el siguiente ejemplo:

https://jsfiddle.net/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.com/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>