jQueryの外部ファイル化ができない

CDNを使ったjQueryの外部ファイル化をしたいのですが何故かjQueryが動作しません。
下記にコードを載せておくので何故動作しないのか教えていただきたいです。
よろしくお願いします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="css/stylesheet.css">
7  <title>Document</title>
8
9  <!-- リセットcss -->
10  <link href="https://unpkg.com/sanitize.css" rel="stylesheet" />
11
12  <!-- fontawesomeを使うためのコード -->
13  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
14
15  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
16  <link rel="stylesheet" href="jquery/stylesheet.js">
17  
18
19</head>
20<body>
21  <main>
22　  <div>
23      <button class="fadeout">fadeout</button>
24    </div>
25    <div class="box">box</div>
26 </main>
27</body>

scss
1.box{
2      width: 200px;
3      height: 200px;
4      background-color: #fcc;
5      padding: 10px;
6    }

javascript
1$('.fadeout').on('click',function(){
2  $('.box').fadeToggle();
3})

退会済みユーザー

2020/07/31 04:43

JavaScript のコードはどこにあるのですか？

augsup

2020/07/31 05:11

javascriptのファイルの中にjqueryを記述しています。

退会済みユーザー

2020/07/31 05:38 編集

> javascriptのファイルの中にjqueryを記述しています。意味不明です。<link rel="stylesheet" href="jquery/stylesheet.js"> のこと？　であれば、それでは動くはずはないです。

augsup

2020/07/31 05:50

jqueryを外部ファイル化する時は通常jsファイルに記述していくのではないのでしょうか？

退会済みユーザー

2020/07/31 06:59 編集

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

回答2件

ベストアンサー

html
1☓<link rel="stylesheet" href="jquery/stylesheet.js">
2◯<script src="jquery/stylesheet.js"></script>

js
1$(function(){
2$('.fadeout').on('click',function(){
3  $('.box').fadeToggle();
4});
5});

stylesheet.jsがlink読み込みになっているのでスクリプトタグで読み込めば動くかと思います。

投稿2020/07/31 05:19

web11

総合スコア52

augsup

2020/07/31 05:39

ご回答ありがとうございます。 link読み込みではなくscriptタグを使うのですね！指示どうりにしてみると無事、jqueryが作動しました！！また少し質問なのですが私の書いたjqueryのコードには下記のコードを記載していませんでしたが、このコードを書くこともjqueryを動作させるのに必要な手順だったようです。これはどのような意味を持っているのでしょうか？ --code-- $(function(){ });

web11

2020/07/31 05:56 編集

```javascript $(function(){ }); ``` htmlのコードというのは上から順番に処理されていくためjsを読み込む段階では、まだhtmlが存在しないため処理ができなくなります。(.fadeoutのbutton等) そのため上記コードの中に処理を書くとhtmlのタグを読み終わった上で処理を開始するというコードになるため正常に動作するようになります。

web11

2020/07/31 05:59 編集

また、bodyの閉じタグ直前にjsを書けばhtmlが読み終わった後に必ず処理されるようにはなりますが、その場合でも「$(function(){});」の中に書いたほうが安全です。 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="jquery/stylesheet.js"></script> </body>

augsup

2020/07/31 06:00

htmlを読み込んだのちにjqueryの処理を行うという意味なのですね。理解できました。また安全のため毎回記述しようと思います。ご回答ありがとうございました。

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