JavaScript基礎 levelDrill_2 3-5の解説

      //下記の変数を使って、生まれ年を入力すると、干支が表示されるようにしてください。
      //関数etoで作ってください。
      //2000年は「辰」でした。
      const btn = document.querySelector("button");

      /*formから値を取得するには、
            const year = document.querySelector("#year").value;
            を使います。*/

という問題でした。

では解説です。

はじめに、干支を表示するために干支が格納されている配列を作りましょう。

      // 干支の配列を作成する
      const etoArray = [
        "子",
        "丑",
        "寅",
        "卯",
        "辰",
        "巳",
        "午",
        "未",
        "申",
        "酉",
        "戌",
        "亥",
      ];

配列ができたので、西暦から配列etoArrayの何番目かを出せば、干支を表示することができます。

西暦から干支を出す計算式が実はあります。

十二支は、西暦を12で割り、余りを求めます。それを、0:申、1:酉、2:戌、3:亥、4:子、5:丑、6:寅、7:卯、8:辰、9:巳、10:午、11:未に当てはめます。

今年は2024年なので12で割った余りは8なので今年の干支が辰であることがわかります。

配列etoArrayは子から始まっていて、4つずれているのでこの場合、(西暦 - 4) % 12 で配列etoArrayの何番目かを出すことができます。

4引くのがややこしい場合は順番を変えて申から始まる配列に変えてしまって構いません。

では西暦を受け取って干支を返す関数を作ります。
      function eto(year) {
        const etoIndex = (year - 4) % 12;
        const eto = etoArray[etoIndex];
        return eto;
      }

引数としてyear(西暦)を受け取り、変数etoIndexで何番目かを求めています。
etoArrayのetoIndex番目が受け取った西暦の干支ということになります。
最後にその年の干支が格納された変数etoを戻り値として返します。

西暦から干支を出す仕組みができたので、あとはそれを呼び出す(起動する)だけです。
ボタンをクリックすると干支を表示するようにしましょう
      //関数etoの実行
      btn.addEventListener("click", function () {
        const year = document.querySelector("#year").value;
        const result = eto(year);

        const output = document.createElement("p");
        output.textContent = year + "年は" + result + "です。";

        document.body.appendChild(output);
      });

const year = document.querySelector("#year").value;
でフォームの値を変数yearに入れます。

const result = eto(year);

で関数etoにyearを渡し、戻り値として受け取った干支を変数resultに入れます。

ここまででフォームに入力された年の干支を出すことができたので表示するだけです。

const output = document.createElement("p");
output.textContent = year + "年は" + result + "です。";

document.body.appendChild(output);

新しくpを作りtextContentの中に文章を入れて、appendChilidすることで表示されました。

コメント

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

カテゴリー

月間アーカイブ

関連記事