Q&A
早速のご回答ありがとうございます！
追加でお伺いさせてください。addEventListenerについて学習しなおしました。
ご指摘いただいたようにこちらを使うべきだと思ったのですが、
guubtn.addEventListener('click', の括弧閉じ【 ）】はどこに記述するべきでしょうか・・・？
色んな位置、falseを追加してみましたが赤い波線が出るのと、いまだ動作しませんでした。
【やっていること】
関数の勉強で、JavaScriptでじゃんけんゲームを作成しようと思いました。
(この作成を指標にされている方も多かったので)
【実現したいこと】
画像、グーチョキパーのどれかをクリックした際、
その挙動に合わせてランダムでグーチョキパーのどれかが出力される。
それに併せて勝ち・あいこ・負けの表示をさせたいです。
【詰まっていること】
何とかコードを書いてみたのですが、画像をクリックしても反応がありません・・。
どこが間違っているのか・どうすれば動くのか教えていただきたいです。
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>じゃんけんゲームの作成</title> 5 <meta charset="UTF-8"> 6 </head> 7 <body> 8 <div> 9 <div id="pc"><img src="../images/janken_null.png"></div> 10 <div id="kekka"></div> 11 </div> 12 <br> 13 <div id="guu"><img src="../images/janken_gu.png"></div> 14 <div id="choki"><img src="../images/janken_choki.png"></div> 15 <div id="paa"><img src="../images/janken_pa.png"></div> 16 <script type="text/javascript" src="../js/test.js"></script> 17 18 </body> 19</html> 20
javaScript
1function rand(){ 2 var judge = Math.floor(Math.random()* 3); 3 return judge; 4 } 5 6 var guubtn = document.querySelector( "guu" ) 7 guubtn.onclick = function(){ 8 9 r = rand(); 10 if (r === 1) { 11 document.querySelector( "kekka" ).innerHTML = "勝利！"; 12 document.querySelector( "pc" ).innerHTML = "<img src=\"../images/janken_pa.png\">"; 13 } else if (r === 2) { 14 document.querySelector( "kekka" ).innerHTML = "あいこ"; 15 document.querySelector( "pc" ).innerHTML = "<img src=\"../images/janken_gu.png\">"; 16 } else if (r === 3) { 17 document.querySelector( "kekka" ).innerHTML = "敗北"; 18 document.querySelector( "pc" ).innerHTML = "<img src=\"../images/janken_choki.png\">"; 19 }; 20 21 var chokibtn = document.querySelector( "choki" ) 22 chokibtn.onclick = function(){ 23 r = rand(); 24 if (r === 1) { 25 document.querySelector( "kekka" ).innerHTML = "勝利！"; 26 document.querySelector( "pc" ).innerHTML = "<img src=\"../images/janken_pa.png\">"; 27 } else if (r === 2) { 28 document.querySelector( "kekka" ).innerHTML = "あいこ"; 29 document.querySelector( "pc" ).innerHTML = "<img src=\"../images/janken_gu.png\">"; 30 } else if (r === 3) { 31 document.querySelector( "kekka" ).innerHTML = "敗北"; 32 document.querySelector( "pc" ).innerHTML = "<img src=\"../images/janken_choki.png\">"; 33 }; 34 } 35 36 var paabtn = document.querySelector( "paa" ) 37 paabtn.onclick = function(){ 38 r = rand(); 39 if (r === 1) { 40 document.querySelector( "kekka" ).innerHTML = "勝利！"; 41 document.querySelector( "pc" ).innerHTML = "<img src=\"../images/janken_pa.png\">"; 42 } else if (r === 2) { 43 document.querySelector( "kekka" ).innerHTML = "あいこ"; 44 document.querySelector( "pc" ).innerHTML = "<img src=\"../images/janken_gu.png\">"; 45 } else if (r === 3) { 46 document.querySelector( "kekka" ).innerHTML = "敗北"; 47 document.querySelector( "pc" ).innerHTML = "<img src=\"../images/janken_choki.png\">"; 48 }; 49 } 50} 51
回答2件
0
document.querySelectorはCSSセレクターで記述する必要があるため、
idを指定する場合はそれぞれ
document.querySelector( "#guu" ) document.querySelector( "#choki" ) document.querySelector( "#paa" )
などのように、#id名とする必要があります。
投稿2021/05/30 11:22
総合スコア1135
0
ベストアンサー
guubtn.onclick = function(){の書き方が間違っています。guubtnをクリックした際に実行される関数は、guubtn.addEventListener('click', function () {と書くのが正解です。- また、document.querySelectorでIDを指定したい場合は、
document.querySelector("#guu")のように、「#(ID名)」とする必要があります。
上記2点を直せば、画像をクリックした際に反応するようにはなるかと思います。
ゲームとしての動きはまだ不思議ですね。グー・チョキ・パーのいずれかをクリックしたとき、勝ち負けの表示が間違っているように見えます（左上の手に対する勝ち負けが正しく表示できていない）
また、今回はグー・チョキ・パーをクリックしたときでそれぞれ関数を別々に作っているようですが、1つの関数にまとめることも可能です。（自分の手、CPUの手を引数に渡して、それに則って勝敗を判定する）
この方が処理が簡潔でよいですね。
投稿2021/05/30 11:30
編集2021/05/30 11:36
総合スコア587
試しに、グーをクリックしたときの部分のみ書いてみますとこのようになります。
波括弧閉じの後です。
guubtn.addEventListener("click", function () {
r = rand();
if (r === 1) {
document.querySelector("#kekka").innerHTML = "勝利！";
document.querySelector("#pc").innerHTML =
'<img src="../images/janken_pa.png">';
} else if (r === 2) {
document.querySelector("#kekka").innerHTML = "あいこ";
document.querySelector("#pc").innerHTML =
'<img src="../images/janken_gu.png">';
} else if (r === 3) {
document.querySelector("#kekka").innerHTML = "敗北";
document.querySelector("#pc").innerHTML =
'<img src="../images/janken_choki.png">';
}
});
ご親切にコードまでありがとうございます！
同じような記述が続いているのでまとめられそうだな～と思いつつ、まだまだ勉強不足のためそこまで至らない次第です・・。
ご回答と、今後のヒントまでありがとうございました！
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/05/30 12:07