Javascript onclick 只工作一次

Javascript onclick only works once

本文关键字：一次 onclick 工作 Javascript      更新时间：2023-09-26

所以我做了这个， 

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

发现于： https://jsfiddle.net/dkjufqn0/

在其中，一枚硬币在旋转。但是，它只触发一次。我第一次点击它。之后它不会再次触发。帮助！

每次点击硬币时，它都保持在 1800 度，要在每次点击时旋转它，您需要增加其度数，如下例所示：

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>

你确定吗？放置一个控制台.log（在该处理程序中以检查它）

我认为您的代码很好，除了 rotateY 调用在第一次单击后似乎什么也没做，因为您总是将其设置为相同的值。

相关文章：