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

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

ただいまの
回答率

87.61%

jQuery,javascript click について

受付中

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 862

score 12

前提・実現したいこと

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

該当のソースコード

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);
    });
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+3

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/03 20:52

    とりあえず書いてみて、試してみて、エラーを修正して、という手順で進めてください。
    変数を用意して、クリックのたびに値を変更することが出来ないのでしょうか。それともその値を分岐に使う方法がわからないのでしょうか。

    【質問するときのヒント|teratail(テラテイル)】
    https://teratail.com/help/question-tips#questionTips1-2
    > 投稿前に検索し、できるところまで自分でやってみましょう
    (中略)
    > そして調べてみた結果を実際に試してみましょう。
    > 解決はしなくても、試す前よりあなたの問題や不明点は明確になっているはずです。

    キャンセル

  • 2019/05/03 22:56

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

    キャンセル

  • 2019/05/03 23:00

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

    キャンセル

+1

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

$('li[id]').on('click', function(event) {
  let img = null;
  switch (Math.floor(Math.random() * 3)) {
    case 0:
      img = '<img src="gu.jpg" alt="グー" />';
      break;
    case 1:
      img = '<img src="pa.jpg" alt="パー" />';
      break;
    case 2:
      img = '<img src="cho.jpg" alt="チョキ" />';
      break;
  }

  $('#pc_hands:empty,#pc_hands2:empty').filter(':first').append(img);
});


https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/random

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 87.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る