干支を計算するJavaScript

初めまして。独学でhtmlから始まりcss、JavaScript、PHP、mySQLとWEBフロントエンドをがんばっています。
独学でヒィヒィ言いながら学習する姿や、間違えてるポイントをアウトプットしていこうと思います。
初回は、JavaScriptで干支を計算するWEBアプリの話。まず、簡単に仕様を決めます。
・入力は西暦数字4桁
・配列に干支を入れて、入力された数字を12で割ってあまりで算出
（計算しやすく、配列に入れる干支は「申」から）
今回はJavaScriptの学習なのでhtmlは最低限のコードでOKってことにしました。
ちなみに、どういう間違えをしたか失敗コードが前半に出てきます。最後に一応成功したコードを載せます。

まず、すごい簡潔なhtml
※送信しないならformタグ不要のご指摘があったので、修正
```html:eto.html
    <span class="text">干支を知りたい年を入力してください</span>
        <input type="number" value="2024" id="year">
        <input type="button" value="計算" id="btn">

    <p id="output"></p>
```

続いて、自分でなんとか考えたJavaScript。（間違ってます）
```javascript:eto.js
        const etoList = ['申','酉','戌','亥','子','丑','寅','卯','辰','巳','午','未'];
        let btn = document.getElementById("btn");
        let year = document.getElementById("year");

        btn.addEventListener("click",function(){
            let eto = etoList[(year + 8) % 12];
            document.getElementById("output").textContent = '${eto}年です';
        })
```
結果はこちら。
![スクリーンショット 2024-11-09 21.08.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3916920/33fe42ae-3499-1443-6c96-493398fe38e9.png)
あれ？なんだっけ、定義すると変数みたいに代入してくれるアレが出ない。
文字が出てくるってことは、計算は実行されてるのかな？
というわけで、chromeの開発者ツールを見てみる。
![スクリーンショット 2024-11-09 21.14.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3916920/6eb1dc34-02f2-a6f4-2439-7ce470142db3.png)
何にもわからない。。。
これを見てデバックできるのは、ある程度コードを読み書きできる人だと思い、諦める。
ボタンを押したら、イベント発火って考えでいいはずなんだけどなー、何がおかしいのかなぁ。

あ！数字を入力してからyearの数字読み取るのかな？イベントリスナーの中に入れてみたらどうだろう。
```javascript:eto.js
        const etoList = ['申','酉','戌','亥','子','丑','寅','卯','辰','巳','午','未'];
        let btn = document.getElementById("btn");
        
        btn.addEventListener("click",function(){
            let year = document.getElementById("year");
            let eto = etoList[(year + 8) % 12];
            document.getElementById("output").textContent = '${eto}年です';
        })        
```
何も変わらず。
そもそも、yearに、id="year"を代入するだけじゃ、入力された数字を読み込んでないのでは？（実行されてるかどうかがわからない…）
ということで、調べてみると、id拾った後に、.valueつけるといいらしい。
```javascript:eto.js
        const etoList = ['申','酉','戌','亥','子','丑','寅','卯','辰','巳','午','未'];
        let btn = document.getElementById("btn");


        btn.addEventListener("click",function(){
        let year = document.getElementById("year").value;
        alert(year);
        }
        );
```
ちょっとわかんなすぎたので、alart出して、確認してみる。
入力結果は反映されてるっぽい。
うーん、何がおかしいのかなぁ。わからなさすぎるので、chatGPT先生に助けを求める。
![スクリーンショット 2024-11-09 21.53.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3916920/d44a7772-3340-64de-8017-9489b189402f.png)
な、なんと！バッククォート！
というわけで、修正。
```javascript:eto.js
        const etoList = ['申','酉','戌','亥','子','丑','寅','卯','辰','巳','午','未'];
        let btn = document.getElementById("btn");
        
        btn.addEventListener("click",function(){
            let year = document.getElementById("year").value;
            let eto = etoList[year % 12];
            document.getElementById("output").textContent = `${eto}年です`;
        })
```
![スクリーンショット 2024-11-09 21.54.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3916920/c6374ca8-54aa-3aeb-896f-1518fc482fb9.png)
できた！
今年、辰年だったんですね、忘れていました。
chatGPT先生に最初から模範コードを教えてもらっちゃうと、`${hoge}`はバッククォートで囲まないといけないことに気づかなかったので、まずは自分で書いてみてレビューしてもらうのはなかなかいいんじゃないかと思ったのでした。
小さな一歩でも、できると楽しいですね。学習とアウトプットを続けたいです。ではまた！