ジャンケンを作っているのですが画像をクリックすると勝ち敗けあいこのパターンの画像を表示したいです

前提・実現したいこと

ジャンケンを作っているのですが画像をクリックすると勝ち敗けあいこのパターンの画像を表示したいです
ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

ソースコード
             <!DOCTYPE html>
<html>

<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <script src="js/jquery-2.1.3.min.js"></script>
        <link rel="stylesheet" href="css/sample.css">
        <title></title>
        <style type="text/css">
                * {
                        margin: 0;
                        padding: 0;
                }
        </style>
</head>

<body>
        <!--音楽-->
        <audio src="mp/aka!BGM.mp3" autoplay loop>

                <code>audio</code>
        </audio>
        <header>
                <h1>
                        <img src="https://fontmeme.com/permalink/180426/63520fd2ae9924d2f98848e4afbabf64.png" alt="">
                </h1>
        </header>
        <!--流れる字-->
        <div>
                <p class='fadein'>

                        <span></span>
                        <br>
                        <span></span>
                        <br>
                        <span></span>
                        <br>
                        <span>きみ!</span>
                        <br>
                        <span></span>
                        <br>
                        <span></span>
                        <br>
                </p>
        </div>
        <!-- ローダー部分 -->
        <div id="loading">
                <div id="loadImg">
                        <img src="http://a.top4top.net/p_1990j031.gif" alt="Loading">
                </div>
        </div>
        <div id="wrappAll">
                ジャンケン〜〜ポン
        </div>
        <!--おわり-->
        <div class="">
                <img src="img/red.gif" alt="" class="a">
                <div id="slide">
              
                </div>


                <main>
                        <ul>
                                <li id="gu">
                                        <img src="img/hitokage.gif" alt="">
                                </li>
                                <li id="cho" class="fusigidane">
                                        <img src="img/fusigidane.gif" alt="">
                                </li>
                                <li id="par" class="zenigame">
                                        <img src="img/zenigame.gif" alt="">
                                </li>
                        </ul>
                        <div>？
                                <span id="pc_hands">なに？</span>
                        </div>
                        <!--ジャンケン勝ち負けシステム-->
                        <div id="">勝ち
                                <span id="win">0</span>回</div>
                        <div id="">負け
                                <span id="lo">0</span>回</div>
                        <div id="">引き分け
                                <span id="aiko">0</span>回</div>
                </main>
                <!--鳴き声-->
              
                <!--ここまで-->
            

                <footer></footer>
                <script>
                        //じゃんけん用のSCRIPTを書いてください
                       
                        //勝ち負け開始数字//
                        let win = 0;
                        let lo = 0;
                        let aiko = 0;
                        $("#gu").on("click", function () {
                                const a = Math.ceil(Math.random() * 3);
                                if (a == 1) {
                                        $("#jud").html('勝ち');
                                        $("#win").html(win);
                                        win += 1
                                        function imgClick() {
                                                alert("クリックされました");
                                        }

                                }
                                if (a == 2) {
                                        $("#jud").html("負け");
                                        $("#lo").html(lo)
                                        lo += 1
                                }
                                if (a == 3) {
                                        $("#jud").html("あいこ");
                                        $("#aiko").html(aiko);
                                        aiko += 1
                                }
                        });
                        $("#cho").on("click", function () {
                                const a = Math.ceil(Math.random() * 3);
                                if (a == 1) {
                                        $("#jud").html('勝ち');
                                        $("#win").html(win);
                                        win += 1
                                }
                                if (a == 2) {
                                        $("#jud").html("負け");
                                        $("#lo").html(lo)
                                        lo += 1
                                }
                                if (a == 3) {
                                        $("#jud").html("あいこ");
                                        $("#aiko").html(aiko);
                                        aiko += 1
                                }
                        });
                        $("#par").on("click", function () {
                                const a = Math.ceil(Math.random() * 3);
                                if (a == 1) {
                                        $("#jud").html('勝ち');
                                        $("#win").html(win);
                                        win += 1
                                }
                                if (a == 2) {
                                        $("#jud").html("負け");
                                        $("#lo").html(lo)
                                        lo += 1
                                }
                                if (a == 3) {
                                        $("#jud").html("あいこ");
                                        $("#aiko").html(aiko);
                                        aiko += 1
                                }
                        });
                     
                </script>

                <script src="js/jquery-2.1.3.min.js"></script>
                <script src="js/jquery-3.3.1.min.js"></script>
                <script src="js/audiojs/audiojs/audio.min.js"> </script>
                <script src="js/script.js"></script>
</body>

</html>

### 試したこと
クリックすると画像が別ページで表示されたりします。
同ページで表示したいです
質問下手ですいません
ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Udomomo

2018/04/30 12:28

htmlも載せてください。

m.ts10806

2018/04/30 23:38

コードブロックは```で”囲って”ください。質問テンプレート部分が多く残っており、質問と関係ないことはノイズとなりますので、削除するなど適宜調整してください。

m.ts10806

2018/05/01 00:34

「発生している問題・エラーメッセージ」本当に何も起きていないでしょうか？ブラウザ開発ツールのコンソールを確認してみてください。

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

回答1件

ベストアンサー

1.バージョンの異なるjqueryを呼び出すのは・・・。おそらく3.3.1のほうが上書きされています。
2.自前のスクリプトより前にjqueryを呼び込みましょう

ということで、こんな感じで

HTML
1 ....
2
3    <!--ここまで-->
4
5    <footer></footer>
6
7    <script src="js/jquery-3.3.1.min.js"></script>
8    <script src="js/audiojs/audiojs/audio.min.js"> </script>
9
10    <script>
11      //じゃんけん用のSCRIPTを書いてください
12
13      //勝ち負け開始数字//
14
15 ....
16
17          aiko += 1
18        }
19      });
20    </script>
21    <script src="js/script.js"></script>
22
23  </body>
24
25</html>