How do i continuously rotate a photo using Javascript function-CodePudding

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.

CodePudding user response：

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