javascriptでじゃんけんゲームが動かない

javascriptでじゃんけんゲームを作っています

ちゃんと組んだはずなのに全く表示されません
どこが違うのか教えてほしいです

追記
cssがなかったため再度cssを追加しました

html

<!DOCTYPE html>
<html lang="ja"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="jyan.css" media="all">
<title></title>
<script>
function janken(num){
    let Myte = document.getElementsByName("te");
    let My = document.getElementById("My");
    let CPte = document.getElementById("Cte");
    let ELT = document.getElementById("ELT");

    let ote = ["グー", "チョキ", "パー"];
    const Lan = Math.floor(3 * Math.random());
    CPte.innerHTML = "<p>" + ote[Lan] + "</p>";

    let SA = String(Lan) + String(num);
    if(Lan === num){
        ELT.innerHTML = "<p>" + "あいこ" + "</p>";
        My.removeAttribute("kumi");
        CPte.removeAttribute("kumi");
    }else{
        if(SA === "02" || SA === "10" || SA === "21"){
            My.setAttribute("class", "red");
            CPte.setAttribute("class", "black");
            ELT.innerHTML = "";
        }else{
            My.setAttribute("class", "black");
            CPte.setAttribute("class", "red");
            ELT.innerHTML = "";
        }
    }
}
window.onload = function(){
	let i_btn = document.getElementsByName("te");
    for(let i = 0; i < i_btn.length; i++){
        i_btn[i].addEventListener('mouseover', () => {
        i_btn[i].style.backgroundColor = "orange";
        });
        i_btn[i].addEventListener('mouseout', () => {
        i_btn[i].style.backgroundColor = "";
       });
    }

	i_btn[0].onclick = function(){
		janken(0);
	};
	i_btn[1].onclick = function(){
		janken(1);
	};
	i_btn[2].onclick = function(){
		janken(2);
	};
};
</script>
</head>
<body>
<h2>じゃんけんゲーム</h2>

<div class="CO">
    <div class="botan">
        <div class="kei">computer</div>
        <div id="Cte" class="kuro"><p>pap</p></div>
    </div>
    <div id="ELT"></div>
    <div class="botan">
        <div class="kei">you</div>
        <div id="My" class="aka">
            <button type="button" name="te">グー</button><br>
            <button type="button" name="te">チョキ</button>
            <button type="button" name="te">パー</button><br>
        </div>
    </div>
</div>


</body></html>

css

@charset "utf-8";
button{
    height: 25px;
    width: 80px;
}
.botan{
    content: "";
    display: block;
    visibility: hidden;
    clear: both;
}
.CO{
    float: left;
    width: 310px;
    height:120px;
    display: flex;
    align-items: center;
}
#Cte{
    width: 100px;
    height: 100px;
    border: 1px dotted blue;
    align-items: center;
    display: flex;
    align-items: center;

} 
#Cte p{
    width:100px;
    margin:0px;
    text-align: center;
}
#ELT{
    float: left;
    width: 110px;
    height: 100px;
    padding-top: 20px;
    display: flex;
    align-items: center;
}
#ELT p{
    width:100px;
    margin:0px;
    text-align: center;
}
#My{
    border: 1px dotted blue;
    width: 100px;
    height: 85px;
    text-align: center;
    padding-top: 15px;
}
.aka{background-color: red;}
.kuro{
    background-color: black;
    color: blanchedalmond;
    font-weight: bold;
}
.kei{text-align: center;}

Jon_do

2020/12/19 14:29 編集

cssも追記するのをおすすめします。あと今回、Java関係ないので消しましょう

babu_babu_baboo

2020/12/20 14:23

jibtn[i], j_btn.lengthがタイポ ELT要素が無い

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

回答1件

ベストアンサー

こんな感じでしょうか？

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6    <title></title>
7    <style>
8        button {
9            height: 25px;
10            width: 80px;
11        }
12
13        .botan {
14            content: "";
15            display: block;
16            clear: both;
17        }
18
19        .CO {
20            float: left;
21            width: 310px;
22            height: 120px;
23            display: flex;
24            align-items: center;
25        }
26
27        #Cte {
28            width: 100px;
29            height: 100px;
30            border: 1px dotted blue;
31            align-items: center;
32            display: flex;
33            align-items: center;
34
35        }
36
37        #Cte p {
38            width: 100px;
39            margin: 0px;
40            text-align: center;
41        }
42
43        #ELT {
44            float: left;
45            width: 110px;
46            height: 100px;
47            padding-top: 20px;
48            display: flex;
49            align-items: center;
50        }
51
52        #ELT p {
53            width: 100px;
54            margin: 0px;
55            text-align: center;
56        }
57
58        #My {
59            border: 1px dotted blue;
60            width: 100px;
61            height: 85px;
62            text-align: center;
63            padding-top: 15px;
64        }
65
66        .red {
67            background-color: red;
68        }
69
70        .black {
71            background-color: black;
72            color: blanchedalmond;
73            font-weight: bold;
74        }
75
76        .kei {
77            text-align: center;
78        }
79    </style>
80    <script>
81        function janken(num) {
82            let Myte = document.getElementsByName("te");
83            let My = document.getElementById("My");
84            let CPte = document.getElementById("Cte");
85            let ELT = document.getElementById("ELT");
86
87            let ote = ["グー", "チョキ", "パー"];
88            const Lan = Math.floor(3 * Math.random());
89            CPte.innerHTML = "<p>" + ote[Lan] + "</p>";
90
91            let SA = String(Lan) + String(num);
92            if (Lan === num) {
93                ELT.innerHTML = "<p>" + "あいこ" + "</p>";
94                My.removeAttribute("kumi");
95                CPte.removeAttribute("kumi");
96            } else {
97                if (SA === "02" || SA === "10" || SA === "21") {
98                    My.setAttribute("class", "red");
99                    CPte.setAttribute("class", "black");
100                    ELT.innerHTML = "<p>" + "勝ち" + "</p>";
101                } else {
102                    My.setAttribute("class", "black");
103                    CPte.setAttribute("class", "red");
104                    ELT.innerHTML = "<p>" + "負け" + "</p>";
105                }
106            }
107        }
108        window.onload = function () {
109            let i_btn = document.getElementsByName("te");
110            for (let i = 0; i < i_btn.length; i++) {
111                i_btn[i].addEventListener('mouseover', () => {
112                    i_btn[i].style.backgroundColor = "orange";
113                });
114                i_btn[i].addEventListener('mouseout', () => {
115                    i_btn[i].style.backgroundColor = "";
116                });
117            }
118
119            i_btn[0].onclick = function () {
120                janken(0);
121            };
122            i_btn[1].onclick = function () {
123                janken(1);
124            };
125            i_btn[2].onclick = function () {
126                janken(2);
127            };
128        };
129    </script>
130</head>
131
132<body>
133    <h2>じゃんけんゲーム</h2>
134
135    <div class="CO">
136        <div class="botan">
137            <div class="kei">computer</div>
138            <div id="Cte" class="kuro">
139                <p>pap</p>
140            </div>
141        </div>
142        <div id="ELT"></div>
143        <div class="botan">
144            <div class="kei">you</div>
145            <div id="My" class="aka">
146                <button type="button" name="te">グー</button><br>
147                <button type="button" name="te">チョキ</button>
148                <button type="button" name="te">パー</button><br>
149            </div>
150        </div>
151    </div>
152
153
154</body>
155
156</html>

非表示の理由

css
1.botan{
2    content: "";
3    display: block;
4    visibility: hidden; <- これのせいで非表示になっていた
5    clear: both;
6}

あとは　red が　aka だったり black が kuroだったり

投稿2020/12/21 05:23

Jon_do

総合スコア1373

PH_BZE

2020/12/22 02:01

ありがとうございます

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

javascriptでじゃんけんゲームが動かない

関連した質問