Javascript OnClick работает только один раз

Так что я сделал это,Javascript OnClick работает только один раз

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/

И в этом, монета вращается. Однако он срабатывает только один раз. В первый раз я нажму. После этого он не срабатывает снова. Помогите!

источник

2016-01-22 Dammy Chee

Событие срабатывает при каждом щелчке по нему, вы должны сделать степень переменной и изменить ее с каждым щелчком. – A1rPun

Он не срабатывает только один раз. Он активно срабатывает каждый раз, когда вы нажимаете на него. Он устанавливает вращение на 1800deg каждый раз, вот и все. Поэтому после первого раза вы просто не можете заметить эффект, потому что вращение уже установлено на 1800deg. –

Каждый раз, когда вы нажимаете монету он остается на 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>

источник

2016-01-22 12:44:06

Это сработало! Большое спасибо. Но я хотел бы спросить, что случилось с «град» в конце? Мог ли я использовать rotateY (1800deg) вместо того, чтобы вводить градусы в отдельную переменную? –

вам может потребоваться проверить консоль для получения более подробного пояснения: 'console.log (" rotateY ("+ degrees +" deg) ")' –

Уверены ли вы в этом? Поместите консоль.log (в этом обработчике, чтобы ее проверить)

Я думаю, что ваш код в порядке, за исключением того, что вызовы rotateY ничего не делают после первого щелчка, потому что вы всегда устанавливаете его в одно и то же значение.

источник

2016-01-22 12:46:18

Javascript OnClick работает только один раз

ответ

Смежные вопросы