かんたんなおみくじをjavascriptで作る方法

今回はjavascriptでかんたんなおみくじを作りたいと思います。

おみくじの結果はランダムなのでMath.randomメソッドを使います。

かんたんおみくじをjavascriptで作る

おみくじを引くためのボタンを作る

まずはおみくじを引くためのボタンを作ります。

<input type="button" value="おみくじボタン" id="btn">

おみくじの結果を表示させるためのタグを作る

<div id="result"></div>

おみくじの中身

const fortunes = [
    "大吉", "中吉", "小吉", "吉", "半吉", "末吉", "凶"
];

おみくじボタンの処理

おみくじのボタンがクリックされた時の処理になります。

おみくじボタンが押されたらおみくじで指定した変数からランダムに取得して画面に表示させます。

const button = document.getElementById("btn");
const result = document.getElementById("result");
button.addEventListener("click", () => {
    const fortune = fortunes[Math.floor(Math.random() * fortunes.length)];
    result.innerHTML = fortune;
});

サンプル

以上がおみくじのかんたんな作り方です。

cssなどで装飾すればよりおみくじっぽくなると思います。

いろいろ試してみてください。