ボタンを押すと実行結果ではなく”undefined”と表示される

簡単なおみくじアプリを作っています。
pタグの要素を取得して、pタグの中身を配列の文字列に書き換えるプログラムを作ったのですが、『運勢を占う』ボタンを押してもundefinedと出てしまいます。そのまま配列の要素を表示させるにはどうすれば良いのでしょうか？ご指摘お願いします。

javascript

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="omikuji.css">
    <title>omikuji</title>
</head>

<body>
    <h1 class="tytle">おみくじ</h1>
    <p class="p">あなたの運勢は・・・</p>
    <div class="box2">
        <p id="luck"></p>
    </div>
    <div class="button">
        <button type="button" onclick="luck_draw()">運勢を占う</button>
    </div>
    <script>
        //運勢一覧
        const luck = ["大吉","中吉","小吉","末吉","吉","凶","大凶"];

        function luck_draw() {
            const luck = document.getElementById('luck');
            luck.innerText = luck[Math.floor(Math.random * luck.length)];
        }
    </script>
</body>

</html>

css

.tytle {
    font-size: 100px;
    text-align: center;
    padding-bottom: 30px;
}

.button {
    text-align: center;
}

.p {
    text-align: center;
}

.box2 {
    padding: 0.5em 1em;
    margin: 10px 300px;
    font-weight: bold;
    color: #6091d3;/*文字色*/
    background: #FFF;
    border: solid 3px #6091d3;/*線*/
    border-radius: 10px;/*角の丸み*/
    font-size: 100px;
    text-align: center;
}
.box2 p {
    margin: 0; 
    padding: 0;
}

m.ts10806

2020/11/05 23:04

>おみくじアプリのエラー今回の現象はいわゆる「エラー」ではないので、タイトル改めたほうが良いかと思います。

aoi68

2020/11/06 02:19

ご指摘ありがとうございます。編集して直させていただきました。

m.ts10806

2020/11/06 02:22

バグとか不具合とかもあまりしっくりこないですね（結局書いたとおりに動くので）そのまま「ボタンを押すと実行結果ではなく”undefined”と表示される」のほうが「要件」としては正確かと思います。何か言いたいかというと、同じアプリを作っていて問題がでたときにまた「おみくじアプリのバグ」としてしまうとタイトルが同じになるので何が問題だったか分かりにくくなります。

aoi68

2020/11/06 02:33

了解しました。編集して直させていただきました。

行動規範の内容に同意します

回答2件

ベストアンサー

配列の

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

と変数の

const luck = document.getElementById('luck');

のどちらにも同じluckという名前を使っているのは良くないです。片方の名前を変えて、どっちがどっちなのかを識別できるようにしましょう。それから、変数のluckの方はluck.innerTextに後から値を入れ直すので、constではなくletで宣言した方がよいと思います。

下記のような感じですかね。

<script>
    //運勢一覧
    const luck = ["大吉","中吉","小吉","末吉","吉","凶","大凶"];

    function luck_draw() {
        let luckResult = document.getElementById('luck');
        luckResult.innerText = luck[Math.floor(Math.random * luck.length)];
    }
</script>

投稿2020/11/05 20:06