style.transform = “rotate()” more than once?

Question

I have an svg image that rotates 360deg when I click on a checkbox. I use style.transform. But when I uncheck, it doesn't do it again.

Is there any way to make it rotate more than once without refreshing?

I have tried including the same function in "else"

<input type="checkbox" id="myCheck"  onclick="myFunction()">
<label for="myCheck"><img src="logo.svg" id="svg1"></label>

<script>
function myFunction() {
  var checkBox = document.getElementById("myCheck");
  if (checkBox.checked == true){
    document.getElementById("svg1").style.transform = "rotate(360deg)";
  }else{
    document.getElementById("svg1").style.transform = "rotate(360deg)";
  }
}
</script>

Currently it just rotate once. It does not do it again when I click again.

Answer 1

hmmm. why your else has 360deg too ? If I'm right you should say

if(input.checked) document.getElementById("svg1").style.transform = "rotate(360deg)";
else document.getElementById("svg1").style.transform = "rotate(0)";

Answer 2

Correct me if i am wrong. So you want to rotate a SVG-Element by 360deg? So basically if you rotate an element with 360 degree you won`t see any difference because it is a full rotation. And of course transform doesn't sum your rotation.

You can add a transistion if you want.

 <input type="checkbox" id="myCheck" onclick="myFunction()"> svg <label for="myCheck"><img src="logo.svg" id="svg1"></label> <script> function myFunction() { var checkBox = document.getElementById("myCheck"); document.getElementById("svg1").style.transition = "all 300ms ease-in"; if (checkBox.checked == true){ document.getElementById("svg1").style.transform = "rotate(360deg)"; }else{ document.getElementById("svg1").style.transform = "rotate(0deg)"; } } </script>