ReferenceError: Can't find variable: jQuery

以下を開くとコンソールに
ReferenceError: Can't find variable: jQuery
と表示されます。

JQueryのULを使用する為に貼った

JS
1<!DOCTYPE html>
2<html lang="en" dir="ltr">
3
4<head>
5  <meta charset="utf-8">
6  <title>Travelers公式サイト</title>
7  <link rel="icon" href="favicon.ico">
8  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
9  <link rel="stylesheet" href="css/index.css">
10  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
11  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
12</head>
13
14<body>
15  <header>
16
17  </header>
18
19  <main>
20    <div class="container">
21      <form action="" method="post">
22        <p class="lookup"><input type="text" name="" value="" placeholder="目的地など"></p>
23        <p class="lookup">
24          <input id="datepicker" type="text" name="" value="" placeholder="出発日">
25          <input id="datepicker" type="text" name="" value="" placeholder="帰国日">
26        </p>
27        <p class="lookup"><input type="text" name="" value=""><input type="submit" name="" value=""></p>
28      </form>
29    </div>
30
31  </main>
32
33  <div class="voices">
34    <div class="container">
35
36    </div>
37  </div>
38
39  <footer>
40    <div class="container">
41
42    </div>
43  </footer>
44  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
45  <script>
46    $(function() {
47      $('#datepicker').on('click', function() {
48        $(this).datepicker();
49      });
50
51    })
52  </script>
53</body>
54
55</html>

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

回答1件

ベストアンサー

こちらには

その他のjQuery関連ファイルよりも後でなくてはならない

と書いてありjqueryより前にjqueryを使うファイルを読み込むとエラーが出るか実行できないそうです。

投稿2019/02/08 13:16

編集2019/02/08 13:16

退会済みユーザー

総合スコア0

cerfweb

2019/02/08 15:07

jquery-ui.min.jsより先にjquery.min.jsを読み込めということですね。

m.ts10806

2019/02/08 23:31

補足しますと、あちらこちらにjsファイル読み込み記述が散らばるとこういうことが起きやすくなるので</body>の前にまとめて書くように習慣化されたほうが良いです。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>  </body>

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