jQuery,javascript click　について

前提・実現したいこと

click時に同時にじゃんけんの結果が表示されてしまうのを同時ではなく毎クリックごとに表示されるようにしたいと考えています。左に表示されるのを１回目、右に表示されるのを２回目と分けたいのですがどう分けたらいいのか分からないのでどなたか教えていただけるかたお願いします。

該当のソースコード

html

<main>
    <div class="main">
      <div class="left">
        <div><span id="pc_hands"></span></div>

        
      </div>

      <div class="right">
        <div><span id="pc_hands2"></span></div>

        
      </div>
    </div>

    <ul>
      <li id="gu_btn"><img src="gu.jpg"></li>
      <li id="cho_btn"><img src="cho.jpg"></li>
      <li id="par_btn"><img src="pa.jpg"></li>
    </ul>

css
.main{
    display:flex;
}

<script>
左に表示
    $("#gu_btn").on("click", function () {
      const n = Math.ceil(Math.random() * 3);

      if (n == 1) {
        $("#pc_hands").html('<img src="gu.jpg">');
      }
      if (n == 2) {
        $("#pc_hands").html('<img src="pa.jpg">');
      }
      if (n == 3) {
        $("#pc_hands").html('<img src="cho.jpg">');
        }
      // console.log(n);
    });

右に表示
$("#gu_btn").on("click", function () {
      const n = Math.ceil(Math.random() * 3);

      if (n == 1) {
        $("#pc_hands2").html('<img src="gu.jpg">');
      }
      if (n == 2) {
        $("#pc_hands2").html('<img src="pa.jpg">');
        }
      if (n == 3) {
        $("#pc_hands2").html('<img src="cho.jpg">');
        }
      // console.log(n);
    });

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

回答2件

クリックイベントを一つにして、変数を使って回数を数えて、「何回目なら」という書き方をすれば出来ます。

投稿2019/05/02 12:07

kei344

総合スコア69407

it_k

2019/05/03 10:26

回答ありがとうございます。おっしゃられていることは理解し調べてコードを書いているのですがどのようにコードを書いていいのか分からずよろしければ教えていただけないでしょうか。初歩的な質問で申し訳ございません。

kei344

2019/05/03 11:52

とりあえず書いてみて、試してみて、エラーを修正して、という手順で進めてください。変数を用意して、クリックのたびに値を変更することが出来ないのでしょうか。それともその値を分岐に使う方法がわからないのでしょうか。【質問するときのヒント｜teratail（テラテイル）】 https://teratail.com/help/question-tips#questionTips1-2 > 投稿前に検索し、できるところまで自分でやってみましょう（中略） > そして調べてみた結果を実際に試してみましょう。 > 解決はしなくても、試す前よりあなたの問題や不明点は明確になっているはずです。

it_k

2019/05/03 13:56

ありがとうございます。何度も試しているのですが前に進みません。変数を使い回数を数えるところまでできましたがクリック時の値変更、また値を分岐に使う方法がわかりません。

kei344

2019/05/03 14:00

試したコードは質問文にコードブロックで追記してください。（決して元のコードを消さないでください）

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

Math.random() は0以上1未満の値を返すので、Math.ceil() とすると0の時に困ります。

jQuery
1$('li[id]').on('click', function(event) {
2  let img = null;
3  switch (Math.floor(Math.random() * 3)) {
4    case 0:
5      img = '<img src="gu.jpg" alt="グー" />';
6      break;
7    case 1:
8      img = '<img src="pa.jpg" alt="パー" />';
9      break;
10    case 2:
11      img = '<img src="cho.jpg" alt="チョキ" />';
12      break;
13  }
14
15  $('#pc_hands:empty,#pc_hands2:empty').filter(':first').append(img);
16});