Tudor Apostol Tudor Apostol - 1 month ago 16
Javascript Question

Attempting a star rotation in JS

I have the following code snipet, it is not yet complete, only the Right Button works at the moment: https://jsfiddle.net/8ghey1oh/

The problems I'm facing are the following. When I load the page, the

var rangeValue = document.querySelector(".rng").value;
stays at 50. Is there anyway I can make it change as I move the range slider ?

Another thing is if I press the Right Button it does the animation but if I press it again it wont.

Appreciate the help.

Answer

For the first problem, simple read the value when you call rotateRight instead of on load.

For the second problem, a solution would be to reset the animation when it is finished using animationend (see 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);

fiddle: https://jsfiddle.net/qxuthk1z/