JavaScript　クリック動作によって、htmlの画像を指定した画像へ書き換えたい

JavaScript初学者です。
詰まってしまったのでお力をお借りしたいです。

【目標・やっていること】
JavaScriptでじゃんけんゲームのコードを、簡潔に書くことを目標としています。
グー・チョキ・パーの画像いずれかをクリックしたら
ランダムで相手のじゃんけんの挙動も発生→勝敗の結果まで表示したいです。

【できた挙動】
・クリック動作にて、ランダムで手を出す。
・自分の手と比べて、勝敗を判定
・判定した勝敗を画面上に文字として出力

【詰まってしまったところ】
html内のimg id="nullimage"(空の画像)を
自分がグー・チョキ・パーの画像いずれかをクリックした際
ランダムで出た手(グー・チョキ・パーのいずれか)を画像として表示させたいのですが、表示されません・・・。
js最後から2行目
document.querySelector( "#nullimage" ).innerHTML = comSelectHand；
がきちんと挙動していないのが原因かな？とは思っております・・・。

【お聞きしたいこと】
どうすれば表示されるのか
なぜ今のコードだと表示されないのかをお聞きしたいです。

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>じゃんけんゲーム</title>
5    <meta charset="UTF-8">
6  </head>
7  <body>
8    <div>
9        <img id="nullimage" src="../images/janken_null.png">
10    </div>
11    <br>
12    <table>
13      <tr>
14        <td id="guu" type="button" onclick="btn(0);"><img src="../images/janken_gu.png"></td>
15        <td id="choki" type="button" onclick="btn(1);"><img src="../images/janken_choki.png"></td>
16        <td id="paa" type="button" onclick="btn(2);"><img src="../images/janken_pa.png"></td>
17      </tr>
18      <tr>
19        <td>
20          <div id="resultMsg"></div>
21        </td>
22      </tr>
23    </table>
24    <script type="text/javascript" src="../js/test.js"></script>
25  </body>
26</html>

JavaScript
1function btn(myhand) {
2  var mySelectHand;
3  var comSelectHand;
4  var resultString;
5  var comSelect = Math.floor(Math.random()*3);
6  console.log(comSelect);
7  console.log(myhand);
8
9//0=グー　1＝チョキ　2=パー
10
11  if (myhand == 0) {
12    mySelectHand = "グー";
13} else if (myhand == 1) {
14    mySelectHand = "チョキ";
15} else {
16    mySelectHand = "パー";
17}
18
19if (comSelect == 0) {
20  comSelectHand = "../images/janken_gu.png";
21} else if (comSelect == 1) {
22  comSelectHand = "../images/janken_choki.png";
23} else {
24  comSelectHand = "../images/janken_pa.png";
25}
26  if(myhand == 0 && comSelect == 1) {
27    resultString = "勝ち";
28} else if(myhand == 1 && comSelect == 2) {
29  resultString = "勝ち";
30} else if(myhand == 2 && comSelect == 0) {
31  resultString = "勝ち";
32} else if(myhand == comSelect) {
33  resultString = "あいこ";
34} else {
35  resultString = "負け";
36}
37
38  document.querySelector( "#nullimage" ).innerHTML = comSelectHand;
39  document.getElementById('resultMsg').innerHTML = resultString;
40}
41

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

回答1件

ベストアンサー

.innerHTMLでは、imgのsrc属性（画像のURL）を変えることはできません。
document.getElementById("nullimage").src = comSelectHand;
ではいかがでしょうか？？
（単に、idで要素を取得するだけであれば、getElementByIdの方が高速に処理できます。querySelectorは、例えば"#main ul"（mainというidの要素の配下にあるul要素）のように、より複雑な指定が必要な時に使うのがお勧めです。）

（追伸）前回質問されていたときより、勝敗の判定部分が簡潔でよくなりましたね。

投稿2021/06/06 11:43

編集2021/06/06 11:47

hallen0225

総合スコア587

hichu

2021/06/06 12:02

hallen0225 様動きました！かなりの時間悩んでいたので、とても感動しております・・。 querySelectorについても詳しく教えて頂き、ありがとうございます！今後の自分の知識になります。ありがたいです・・・。前回の質問にも答えてくださったときのコメントを糧に、どうにか簡潔にできればと諦めずに取り組んでおりました。重ねてお礼申し上げます。本当にありがとうございます。

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