やりたい事

Clickしただけ特定の要素が回転して欲しい
└transform: rotate(Xdeg);で、XがClickされただけ「-90」が追加されていく

書いたJavaScript

JavaScript

upBtn.addEventListener('click', function(){       
      // 回転を適用
      document.querySelector("#circle").style.transform = "rotate(" + -90 + "deg)";
  }, false);

つまずきポイント

Clickしたら「-90度」が付与されるが、1回きりでそれ以降は-90度回転しない

ここまで動いただけで感動したが、ここからどうやったら連続して回転してくれるかに頭を悩ました。

色々調べたが、なかなか解決しなかったのでGPT先生にご質問。

GPT先生が書いたJavaScript

JavaScript

  // イベントハンドラ
  let rotationAngle = 0;  // 初期角度を 0 に設定

  upBtn.addEventListener('click', function(){
      console.log('clicked');
  
      // 現在の角度から -90 度ずつ減らす
      rotationAngle -= 90;
  
      // 回転を適用
      document.querySelector("#circle").style.transform = "rotate(" + rotationAngle + "deg)";
  }, false);

一発。
そうか、rotationAngleという変数を使って、Clickされる度に値が追加さしていけば良いのか！！

自分にはなかった発想。

JavaScript

 rotationAngle -= 90;

この書き方、先日Udemyで習って記事書いたぞ！！w

今日も学び。