格言ガチャ作成のためのJavaScript知識は揃いました。 ①～③までの流れを、一気に書いていきましょう！
1.クリックで処理を実行する
まず、ボタンを押したら格言ガチャの処理を実行するという定義を作ります。 これはイベントの項目で登場した、イベントリスナーを使います。
gacha.js
ターゲット.addEventListener("click", function() {
// 実行する処理
});
ターゲットのところは、htmlで命名したidを使って定数（変数でも可）を作ります。
gacha.js
const btn = document.getElementById("gacha-button");
btn.addEventListener("click", function() {
// 実行する処理
});
2. 配列のインデックス番号を生成する
次に「配列内の要素数に見合った数値（整数）」をランダムに生成します。 Mathの項目で書いたスクリプトをそのまま使いましょう。
gacha.js
const btn = document.getElementById("gacha-button");
btn.addEventListener("click", function() {
const num = Math.floor(Math.random() * kakugen_items.length );
});
ここで作った「num」を、配列の番号として使います。
3.HTMLに格言を表示する
最後にkakugen_items[num]を、htmlの格言表示部分（gacha-display）に出力します。
格言を表示させる部分は、dispという定数に収めてからから使います。
gacha.js
const btn = document.getElementById("gacha-button");
const disp = document.getElementById("gacha-display");
btn.addEventListener("click", function() {
const num = Math.floor(Math.random() * kakugen_items.length );
disp.innerHTML = kakugen_items[num];
});
格言ガチャのスクリプトが出来ました。 company.htmlを開いて、ボタンをクリックしてみましょう。
4.少しだけCSSで整えて完成！
ここまでで、ご要望の格言ガチャ機能は完成しました。 せっかくですので、見た目をもう少し整えてあげましょう。
style.css
/* 格言ガチャ */
#gacha-display{
margin-top: 1rem;
min-height: 3rem;
}
#gacha-button{
margin-bottom: 3rem;
}
少し余白を入れるだけでも、見やすくなったのではないでしょうか？ スマホ幅での表示など、CSSの練習も兼ねて整えてみてください！
これで、JavaScriptの書き方入門終了です。 お疲れさまでした。
動画講座では、今回の内容+αでJavaScript基礎を解説しています。 ぜひこちらもご覧ください。
無料講座