Html & JS rotate image 90 degrees on click

Question

I am trying to rotate right this image on click
Every click, the image will rotate 90 degrees right, so 4 clicks will get it to the original position.
For some reason as

Answer 1

Firstly, you will have to use $('#theImage') since you are referencing by id. Try the below code.

let angle = [0, 90, 180, 270];
let current = 0;

function rotate90() {
  current++;
  if (current == 4)
    current = 0;
  $('#theImage').css('transform', 'rotate(' + angle[current] + 'deg)');
}

.btn-floating-container {
  top: 50px;
  left: 50px;
  position: fixed;
  z-index: 1;
}

.btn-floating {
  width: 150px;
  height: 50px;
  border-radius: 50%;
  text-align: center;
  padding: 0px;
  font-size: 24px;
}

.rotateimg90 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

  ROTATE