###前提・実現したいこと
ここに質問したいことを詳細に書いてください
現在Bracketにてじゃんけんゲームを作っています。
じゃんけんの勝敗に応じてPCの勝ち数、自分の勝ち数を表示させたいのですが、カウントの表示の仕方がわかりません。もしよろしければ教えていただきたいです。
###発生している問題・エラーメッセージ
エラーメッセージ
###該当のソースコード
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="janken.css"> <title>じゃんけん</title> </head> <body></body> </html><header> <h1>じゃんけん</h1> </header> <main> <ul> <li id="gu_btn">グー</li> <li id="cho_btn">チョキ</li> <li id="par_btn">パー</li> </ul> <div id="pc">コンピュータの出した手は?</div> <div id="kekka">ここに結果を表示します</div> </main> <footer></footer> <script> //**************************************************** //ここから下に記述 //----------------------------------------- //1.乱数関数は以下に記述[関数はイベントの外に記述、覚えておきましょう!] //----------------------------------------- function rand() { var val = Math.floor(Math.random() * 3 + 1); //関数化する! return val; } //----------------------------------------- //グーのClickイベントはいかに記述 //----------------------------------------- var gu_btn = document.querySelector("#gu_btn"); var gu_btn = document.querySelector("#gu_btn"); 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 = "パー"; } if ($r == 2) { document.querySelector("#kekka").innerHTML = "引き分け"; document.querySelector("#pc").innerHTML = "グー"; } if ($r == 3) { document.querySelector("#kekka").innerHTML = "私のかち"; document.querySelector("#pc").innerHTML = "チョキ"; } } //----------------------------------------- //パーのClickイベントはいかに記述 //----------------------------------------- var gu_btn = document.querySelector("#cho_btn"); var gu_btn = document.querySelector("#cho_btn"); var gu_btn = document.querySelector("#cho_btn"); gu_btn.onclick = function() { $r = rand(); //if=1=パー 2=グー 3=チョキ if ($r == 1) { document.querySelector("#kekka").innerHTML = "PCの負け"; document.querySelector("#pc").innerHTML = "パー"; } if ($r == 2) { document.querySelector("#kekka").innerHTML = "勝ち"; document.querySelector("#pc").innerHTML = "グー"; } if ($r == 3) { document.querySelector("#kekka").innerHTML = "引き分け"; document.querySelector("#pc").innerHTML = "チョキ"; } } //----------------------------------------- //チョキのClickイベントはいかに記述 //----------------------------------------- var gu_btn = document.querySelector("#par_btn"); var gu_btn = document.querySelector("#par_btn"); var gu_btn = document.querySelector("#par_btn"); gu_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 = "グー"; } if ($r == 3) { document.querySelector("#kekka").innerHTML = "負け"; document.querySelector("#pc").innerHTML = "チョキ"; } } //ここから上に記述 //**************************************************** </script>
###試したこと
課題に対してアプローチしたことを記載してください
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
回答1件
あなたの回答
tips
プレビュー