じゃんけんゲームについて

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="janken.css">
    <title>じゃんけん</title>

    <style>
        body {
            background-size: cover;
            background: url(%E8%83%8C%E6%99%AF.png) center center / cover no-repeat fixed;
        }

    </style>
</head>

<body>
    <header>
        <h1>じゃんけん</h1>
    </header>
    <main>
        <ul>
            <div id="gu_btn"><img src="gg.png"></div>
            <div id="cho_btn"><img src="chichi.png"></div>
            <div id="par_btn"><img src="pa.png"></div>
        </ul>
        <div id="pc">コンピュータの出した手は？</div>
        <div id="kekka">ここに結果を表示します</div>
        <div id="scoreBoard">あ</div>
    </main>
    <footer></footer>
    <script>
        var count = {
            pc: 0,
            me: 0,
        };
        //************************************************
        //ここから下に記述

        //-----------------------------------------
        //1.乱数関数は以下に記述[関数はイベントの外に記述、覚えておきましょう！]
        //-----------------------------------------
        function rand() {
            var val = Math.floor(Math.random() * 3 + 1); //関数化する！
            return val;
        }

        //-----------------------------------------
        //グーのClickイベントはいかに記述
        //-----------------------------------------
        var gu_btn = document.querySelector("#gu_btn");
        gu_btn.onclick = function() {
            $r = rand();
            //if=1=パー 2=グー 3=チョキ
            if ($r == 1) {
                document.querySelector("#kekka").innerHTML = "PCの勝ち";
               
                document.querySelector("#pc").innerHTML = "パー";
                count["pc"]++;
            }

            if ($r == 2) {
                document.querySelector("#kekka").innerHTML = "引き分け";
               
                document.querySelector("#pc").innerHTML = "グー";
            }

            if ($r == 3) {
                document.querySelector("#kekka").innerHTML = "私の勝ち";
                
                document.querySelector("#pc").innerHTML = "チョキ";
                count["me"]++;
            }

            document.querySelector("#scoreBoard").innerHTML = "PC:" + count["pc"] + " : 私" + count["me"];
        };

        //-----------------------------------------
        //チョキのClickイベントはいかに記述
        //-----------------------------------------
        var cho_btn = document.querySelector("#cho_btn");
        cho_btn.onclick = function() {
            $r = rand();
            //if=1=パー 2=グー 3=チョキ
            if ($r == 1) {
                document.querySelector("#kekka").innerHTML = "私の勝ち";
                document.querySelector("#pc").innerHTML = "パー";
                count["me"]++;
            }

            if ($r == 2) {
                document.querySelector("#kekka").innerHTML = "PCの勝ち";
                document.querySelector("#pc").innerHTML = "グー";
                count["pc"]++;
            }

            if ($r == 3) {
                document.querySelector("#kekka").innerHTML = "引き分け";
                document.querySelector("#pc").innerHTML = "チョキ";
            }
            document.querySelector("#scoreBoard").innerHTML = "PC:" + count["pc"] + " : 私" + count["me"];
        };

        //-----------------------------------------
        //パーのClickイベントはいかに記述
        //-----------------------------------------
        var par_btn = document.querySelector("#par_btn");
        par_btn.onclick = function() {
            $r = rand();
            //if=1=パー 2=グー 3=チョキ
            if ($r == 1) {
                document.querySelector("#kekka").innerHTML = "引き分け";
                document.querySelector("#pc").innerHTML = "パー";
            }

            if ($r == 2) {
                document.querySelector("#kekka").innerHTML = "私の勝ち";
                document.querySelector("#pc").innerHTML = "グー";
                count["me"]++;
            }

            if ($r == 3) {
                document.querySelector("#kekka").innerHTML = "PCの勝ち";
                document.querySelector("#pc").innerHTML = "チョキ";
                count["pc"]++;
            }
            document.querySelector("#scoreBoard").innerHTML = "PC:" + count["pc"] + " : 私" + count["me"];
        };

        //ここから上に記述
        //************************************************

    </script>
</body>

</html>

現在じゃんけんゲームを作成しています。
コンピュータの出した手は？の部分にコンピュータがチョキだったらチョキの画像を、グーだったらグーの画像を表示させたいです。
数時間試行錯誤してみたのですが、実行することができなかったので力を貸してほしいです。

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

回答1件

ベストアンサー

以下のように行ってみてはいかがでしょうか？

HTML
1<!DOCTYPE html>
2<html>
3
4<head>
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width">
7    <link rel="stylesheet" href="janken.css">
8    <title>じゃんけん</title>
9
10    <style>
11        body {
12            background-size: cover;
13            background: url(%E8%83%8C%E6%99%AF.png) center center / cover no-repeat fixed;
14        }
15
16    </style>
17</head>
18
19<body>
20<header>
21    <h1>じゃんけん</h1>
22</header>
23<main>
24    <ul>
25        <div id="gu_btn"><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=gg.png"></div>
26        <div id="cho_btn"><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=chichi.png"></div>
27        <div id="par_btn"><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=pa.png"></div>
28    </ul>
29    <div id="pc">コンピュータの出した手は？</div>
30    <div id="kekka">ここに結果を表示します</div>
31    <div id="scoreBoard">PC:0 : 私:0</div>
32</main>
33<footer></footer>
34<script>
35    var count = {
36        pc: 0,
37        me: 0,
38    };
39    //************************************************
40    //ここから下に記述
41
42    //-----------------------------------------
43    //1.乱数関数は以下に記述[関数はイベントの外に記述、覚えておきましょう！]
44    //-----------------------------------------
45    function rand() {
46        var val = Math.floor(Math.random() * 3 + 1); //関数化する！
47        return val;
48    }
49
50    //-----------------------------------------
51    //グーのClickイベントはいかに記述
52    //-----------------------------------------
53    var gu_btn = document.querySelector("#gu_btn");
54    gu_btn.onclick = function () {
55        $r = rand();
56        //if=1=パー 2=グー 3=チョキ
57        if ($r == 1) {
58            document.querySelector("#kekka").innerHTML = "PCの勝ち";
59
60            document.querySelector("#pc").innerHTML = "<img src=\"https://placehold.jp/3d4070/ffffff/150x150.png?text=pa.png\">";
61            count["pc"]++;
62        }
63
64        if ($r == 2) {
65            document.querySelector("#kekka").innerHTML = "引き分け";
66
67            document.querySelector("#pc").innerHTML = "<img src=\"https://placehold.jp/3d4070/ffffff/150x150.png?text=gg.png\">";
68        }
69
70        if ($r == 3) {
71            document.querySelector("#kekka").innerHTML = "私の勝ち";
72
73            document.querySelector("#pc").innerHTML = "<img src=\"https://placehold.jp/3d4070/ffffff/150x150.png?text=chichi.png\">";
74            count["me"]++;
75        }
76
77        document.querySelector("#scoreBoard").innerHTML = "PC:" + count["pc"] + " : 私:" + count["me"];
78    };
79
80    //-----------------------------------------
81    //チョキのClickイベントはいかに記述
82    //-----------------------------------------
83    var cho_btn = document.querySelector("#cho_btn");
84    cho_btn.onclick = function () {
85        $r = rand();
86        //if=1=パー 2=グー 3=チョキ
87        if ($r == 1) {
88            document.querySelector("#kekka").innerHTML = "私の勝ち";
89            document.querySelector("#pc").innerHTML = "<img src=\"https://placehold.jp/3d4070/ffffff/150x150.png?text=pa.png\">";
90            count["me"]++;
91        }
92
93        if ($r == 2) {
94            document.querySelector("#kekka").innerHTML = "PCの勝ち";
95            document.querySelector("#pc").innerHTML = "<img src=\"https://placehold.jp/3d4070/ffffff/150x150.png?text=gg.png\">";
96            count["pc"]++;
97        }
98
99        if ($r == 3) {
100            document.querySelector("#kekka").innerHTML = "引き分け";
101            document.querySelector("#pc").innerHTML = "<img src=\"https://placehold.jp/3d4070/ffffff/150x150.png?text=chichi.png\">";
102        }
103        document.querySelector("#scoreBoard").innerHTML = "PC:" + count["pc"] + " : 私:" + count["me"];
104    };
105
106    //-----------------------------------------
107    //パーのClickイベントはいかに記述
108    //-----------------------------------------
109    var par_btn = document.querySelector("#par_btn");
110    par_btn.onclick = function () {
111        $r = rand();
112        //if=1=パー 2=グー 3=チョキ
113        if ($r == 1) {
114            document.querySelector("#kekka").innerHTML = "引き分け";
115            document.querySelector("#pc").innerHTML = "<img src=\"https://placehold.jp/3d4070/ffffff/150x150.png?text=pa.png\">";
116        }
117
118        if ($r == 2) {
119            document.querySelector("#kekka").innerHTML = "私の勝ち";
120            document.querySelector("#pc").innerHTML = "<img src=\"https://placehold.jp/3d4070/ffffff/150x150.png?text=gg.png\">";
121            count["me"]++;
122        }
123
124        if ($r == 3) {
125            document.querySelector("#kekka").innerHTML = "PCの勝ち";
126            document.querySelector("#pc").innerHTML = "<img src=\"https://placehold.jp/3d4070/ffffff/150x150.png?text=chichi.png\">";
127            count["pc"]++;
128        }
129        document.querySelector("#scoreBoard").innerHTML = "PC:" + count["pc"] + " : 私:" + count["me"];
130    };
131
132    //ここから上に記述
133    //************************************************
134
135</script>
136</body>
137
138</html>