Как сбросить ротацию после выполнения onclick и сделать ее возможной

Question

У меня есть изображение вращающихся стрелок.При нажатии обновляется капча.Я определил это в коротком CSS, с функцией поворота, вызываемой по клику.Это CSS, HTML и Javascript:

function rotatearrow() {
  arrowreload.style.webkitTransform = 'rotate(360deg)';
  arrowreload.style.MozTransform  = 'rotate(360deg)';
  arrowreload.style.msTransform  = 'rotate(360deg)';
}

function reloadcaptcha() {
  //does what's needed and plays perfectly
}

.reload {
  max-width: 32px;
  height: auto;
  transform: rotate(0);
  transition: all 0.8s;
}

<img id="arrowreload" class="reload" src="../images/reload.png" onclick="rotatearrow(); reloadcaptcha();">

Теперь суть в том, что rotatearrow играет при первом щелчке и вращает стрелки, но никогда не воспроизводится после первого раза.Что я делаю неправильно?Какие изменения я должен сделать в коде?

Answer 1

Каждый раз, когда вы нажимаете, вам нужно увеличивать градус:

let degree = 0;
function rotatearrow() {
  degree += 360;
  arrowreload.style.webkitTransform = `rotate(${degree}deg)`;
}
    

    

.reload {
      max-width: 32px;
      height: auto;
      transform: rotate(0);
      transition: all 0.8s;
 }

<img id="arrowreload" class="reload" src="http://pluspng.com/img-png/triangle-png-triangle-png-clipart-2400.png" onclick="rotatearrow();">

Answer 2

Это будет работать, нам просто нужно продолжать увеличивать значение поворота в кратных, т. Е. - 360 720 1080 .....

function rotatearrow() {
    var transformValue = document.getElementById('arrowreload').style.webkitTransform;
    var transformInteger = transformValue ? ((transformValue.match(/\d+/g).map(Number)[0]/360)+1) : 1;
    document.getElementById('arrowreload').style.webkitTransform = 'rotate('+(360*transformInteger)+'deg)';
}

Надеюсь, что это полезно, также это не требует внешнегообъявление переменной ...