JavaScirpt課題：おみくじ

おみくじを引く！ボタンをクリックすると、下におみくじが表示される。

大吉、中吉、吉、凶 を乱数で決定
凶は赤色で表示される。その他は青色

イメージ

解答例をみる

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="main.js"></script>
    <title>omikuji</title>
</head>
<body>
    <p><input type="button" value="おみくじを引く！" id="btnOmikuji"></p>
    <p id="txtOmikuji">???</p>
</body>
</html>

style.css

/* style.css */
@charset "utf-8";

*{
    margin: 0;
    padding: 0;
}

#btnOmikuji{
    width: 100%;
    font-size: 32pt;
}

#txtOmikuji{
    width: 100%;
    padding: 1em 0;
    font-size: 96pt;
    font-weight: 900;
    text-align: center;
}

main.js

// main.js

window.addEventListener("load", ()=>{
    let btnOmikuji = document.getElementById("btnOmikuji");
    let txtOmikuji = document.getElementById("txtOmikuji");

    const omikuji = ["大吉", "中吉", "吉", "凶"];

    btnOmikuji.addEventListener("click", ()=>{
        let no = Math.floor(Math.random() * 4);

        if(omikuji[no] === "凶"){
            txtOmikuji.style.color = "red";
        }
        else{
            txtOmikuji.style.color = "royalblue";
        }
        txtOmikuji.innerHTML = omikuji[no];
    })
});

おみくじの種類は配列定数としました。
JavaScriptからstyle属性を使って「凶」が出たときは文字色を赤、それ以外は青として設定しています。

実際のイメージをみる