I'm trying to figure out logic to continuously rotate an image in Javascript. So far I have came up to this code. img1 is the id of the image and so far it works but it rotates only once. How do I make it rotate every time I click on it? Im using onclick event.
function rotateProfilePic() {
var image = document.getElementById('img1');
image.style.transform = "rotate(180deg)";
}
Sorry if the question is too simple for someone, I'm beginner in Web Programming.
Set your function as clicks listener on image:
const imgTag = document.getElementById("img1");
const rotateStep = 180; // rotation size
let curImgAngle = 0;
function rotateProfilePic() {
curImgAngle += rotateStep;
imgTag.style.transform = `rotate(${curImgAngle}deg)`;
}
imgTag.addEventListener("click", rotateProfilePic);