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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

781閲覧

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

shioriaiba

総合スコア13

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/10/14 14:40

###前提・実現したいこと
ここに質問したいことを詳細に書いてください
現在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>
<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>
</body> </html>

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/10/14 14:46

質問文のコードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。
shioriaiba

2017/10/14 15:50

すみません、このコードにプラスしてじゃんけんの結果、スコアを表示したいです。このコード自体にエラーは出ていません。
s8_chu

2017/10/14 20:39 編集

**質問文のコードはコードブロックで囲んでいただけませんか?**そうするだけでとても読みやすくなるので非常に助かるのですが...。
guest

回答1

0

ベストアンサー

質問者さんの行いたいことは以下のように行えると思いますが、いかがでしょうか?

HTML

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

投稿2017/10/14 20:40

s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shioriaiba

2017/10/15 11:04

ご回答ありがとうございました!実行したいことそのままの回答でした!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問