アナログ時計の表示でjavascriptのコードが分からない

Question

javascriptのコードの違いが分からないので教えて頂きたいです。
アナログ時計を動作させる時にsetIntervarを使うのですが②の表記でもいいのではないかと思ったのですが正常に動きません。
①と②のコードの違いを教えていただきたいです。
よろしくお願い致します。

①正常に動く

<script>
    var hour = document.querySelector(".hour");
    var minute = document.querySelector(".minute");
    var second = document.querySelector(".second");

    // 1秒毎に各針の角度を求めてそれを実行
    setInterval(() => {
      var date = new Date();
      var s = Math.floor((360 / 60) * date.getSeconds());
      var m = Math.floor((360 / 60) * date.getMinutes() + (s / 60));
      var h = Math.abs( date.getHours() % 12 ) / 12 * 360 + (m / 24);

      second.style.transform = `rotate(${s}deg)`;
      minute.style.transform = `rotate(${m}deg)`;
      hour.style.transform = `rotate(${h}deg)`;
    }, 1000);
</script>

②針が動かない

<script>
function action(){
      var hour = document.querySelector(".hour");
      var minute = document.querySelector(".minute");
      var second = document.querySelector(".second");

      var date = new Date();
      var s = Math.floor((360 / 60) * date.getSeconds());
      var m = Math.floor((360 / 60) * date.getMinutes() + (s / 60));
      var h = Math.abs( date.getHours() % 12 ) / 12 * 360 + (m / 24);

      second.style.transform = `rotate(${second}deg)`;
      minute.style.transform = `rotate(${minute}deg)`;
      hour.style.transform = `rotate(${hour}deg)`;
    }
    setInterval(action, 1000);
</script>

Comments

[kei344]

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

Answer 1

後半の方では、せっかく計算したs、m、hを全く使っていません。元のコードのように${s}degのような展開に差し替えておきましょう。

Comments

[koni01]

コードミスですみません。
動きました。
ありがとうございます。

[oikashinoa]

質問のコードを正しいものに入れ替えてしまったのであれば、元々の質問時のソースに戻して下さい。
maisumakunさんが教えてくれた内容が、後から他の人が見た時に訳わからんことになります。
恥ずかしいことではないので元に戻しておいて下さい。

元々？
second.style.transform = `rotate(${second}deg)`;
minute.style.transform = `rotate(${minute}deg)`;
hour.style.transform = `rotate(${hour}deg)`;
↓
修正後？
second.style.transform = `rotate(${s}deg)`;
minute.style.transform = `rotate(${m}deg)`;
hour.style.transform = `rotate(${h}deg)`;