は、私は次のコードsnipetを持っているJS

Question

のスターの回転をしようと、それが唯一の右ボタンは、現時点では動作しますが、まだ完了していない：私は直面していますhttps://jsfiddle.net/8ghey1oh/

問題は、以下の通りです。ページをロードすると、var rangeValue = document.querySelector(".rng").value;は50のままです。範囲スライダを移動すると、それを変更することはできますか？

もう1つは右ボタンを押してもアニメーションが実行されますが、もう一度押すともう表示されません。

ヘルプを評価してください。

Answer 1

最初の問題については、ロード時ではなくrotateRightを呼び出すと値が簡単に読み取られます。

2つ目の問題については、（Using CSS animationsを参照）を使用してアニメーションが終了したときにアニメーションをリセットするという方法があります。

var rightBtn = document.querySelector(".btnRight"); 
var star = document.querySelector(".starWrap"); 
star.addEventListener('animationend', function() { 
    this.style.animation = "none"; 
}); 

function rotateRight(){ 
    var rangeValue = document.querySelector(".rng").value; 
    var getSeconds = Math.floor(rangeValue)/10; 
    star.style.animation = "spin linear "+getSeconds.toString()+"s"; 
} 

rightBtn.addEventListener("click", rotateRight); 

フィドル：https://jsfiddle.net/qxuthk1z/