javascriptを反映させたい

前提・実現したいこと

webサイトの模写をしている際にjavascriptが反映されなくて困っています。
ｈｔｍｌの最後のほうにある疑似要素であるクラス名　header-btn をクリックした際に動きをつけたいのですができません。console.logで出力してみても反映されないのでコードが違うというよりはjavascriptのファイルが読み込めてないのではと思っています。

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

javascriptがchromに反映されない

html
1コード
2```<!DOCTYPE html>
3<html>
4    <head>
5        <meta charset="utf-8">
6        <title>Blog</title>
7        <meta name="description" content="テキストテキストテキストテキストテキストテキストテキストテキス">
8        <meta name="viewport" content="width=device-width, initial-scale=1">
9        <link rel="shortcut icon" href="img/favicon.ico">
10        <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
11        <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
12        <link rel="stylesheet" href="stylesheet.css">
13        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js?ver=1.8.3"></script>
14        <script src="script.js"></script>
15    </head>
16
17    <body>
18        <header class="wrapper " id="header">
19            <h1 class="title"><a href="#"><img src="https://code-step.com/demo/html/store2/img/logo.svg" alt=""></a></h1>
20            <nav id="navi">
21                <ul>
22                    <li><a href="product.html">PRODUCE</a></li>
23                    <li><a href="about.html">ABOUT</a></li>
24                    <li><a href="company.html">COMPANY</a></li>
25                    <li><a href="">CONTACT</a></li>
26            </nav>
27
28            <a class="header-btn" href="">
29                <span></span>
30                <span></span>
31            </a>
32
33            <div id="mask"></div>
34        </header>
35
36        <main>
37
38        </main>
39
40        <footer>
41
42        </footer>
43    </body>
44
45
46
47```ＣＳＳ
48コード
49```.wrapper {
50    max-width: 1360px;
51    padding: 0 40px;
52    margin: 0 auto;
53}
54#header {
55    display: flex;
56    height: 80px;
57    align-items: center;
58    justify-content: space-between;
59}
60.title {
61    width:200px;
62    
63}
64.title a {
65    display: block;
66}
67.header-btn {
68    position: relative;
69    width:30px;
70    height: 30px;
71
72}
73.header-btn span {
74    background-color: #333;
75    width: 30px;
76    height: 2px;
77    display:block;
78    border-radius: 4px;
79    position: absolute;
80    transition: all 0.5s;
81   
82}
83.header-btn span:nth-child(1) {
84    top:10px;
85}
86.header-btn span:nth-child(2) {
87    bottom:10px;
88}
89#navi {
90    position: fixed;
91    left:-300px;
92    width:300px;
93}
94#mask {
95    display:none;
96    transition: all 0.5s;
97}
98.open .header-btn span {
99    background-color: #fff;
100  }
101.open .header-btn span:nth-child(1) {
102    -webkit-transform: translateY(4px) rotate(-45deg);
103    transform: translateY(4px) rotate(-45deg);
104}
105.open .header-btn span:nth-child(2) {
106    -webkit-transform: translateY(-4px) rotate(45deg);
107    transform: translateY(-4px) rotate(45deg);
108  }
109  .open #mask {
110    display: block;
111    position: fixed;
112    left:0;
113    background: #000;
114}
115### 該当のソースコード
116
117![イメージ説明](6c72da09d6e384f48f2b5d70a09e650a.png)
118
119### 試したこと
120
121ここに問題に対して試したことを記載してください。
122
123### 補足情報（FW/ツールのバージョンなど）
124
125ここにより詳細な情報を記載してください。

Lhankor_Mhy

2021/10/08 06:47

3-7. markdownを利用しましょう https://teratail.com/help/question-tips#questionTips3-7 https://teratail-v2.storage.googleapis.com/assets/img/tour/01.webm?1594714893253494

Lhankor_Mhy

2021/10/08 06:49

フォルダ構成をご提示ください。

Lhankor_Mhy

2021/10/08 07:06

質問の編集を拝読。ご提示のコードを試してみましたが、0がコンソールに表示されました。 Chrome の開発者ツールであれば、NetWorkタブで読み込まれているかどうかわかるので、確認してみてはどうでしょうか。

m.ts10806

2021/10/08 07:10

console.log()の結果がどこに出るつもりで「反映されない」と言っていますか？提示された情報にはどこにもその確認をしたらしき形跡がないですが・・

tera193

2021/10/08 07:12

![イメージ説明](3405ea6adde65dce2eed74f98b274842.png) コード

tera193

2021/10/08 07:14

読み込めていると思うのですが反映されません。。。

tera193

2021/10/08 07:16

chrom上に出力されると思っていました。

tera193

2021/10/08 07:18

https://code-step.com/demo/html/store2/index.html このサイトのように動かしたいのですが動かしたいです

Lhankor_Mhy

2021/10/08 07:25

読み込めている、というご見解であればそのようにご質問を変更した方がいいかもしれませんね。

m.ts10806

2021/10/08 07:31 編集

console.log()の実行結果はブラウザ関係なく「デベロッパツール（開発者ツール）」の「コンソール」に出力されます。サイトページ内には出ません。あと、マークダウンうまくできない方は下記の質問参考に。 https://teratail.com/questions/238564

tera193

2021/10/08 11:16

回答ありがとうございます。自分でも確認したところconsoleは出力されていました。ではなぜjavascriptのclickアクションは実行されないのでしょうか

Lhankor_Mhy

2021/10/09 00:40

> ではなぜjavascriptのclickアクションは実行されないのでしょうか私の回答はお読みいただきましたか？

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

回答1件

ベストアンサー

「jQuery 動作しない」でググると1番目にこのページが出ました。
jQueryが動かない（動作しない）理由を考察！スクリプトのどの箇所にミスがあるかを調べる裏技も紹介 | 誰かのためのホームページ制作

~~今回は、↓これです。~~

(function($){ … }(jQuery)) で囲んでいない | jQueryが動かない（動作しない）理由を考察！スクリプトのどの箇所にミスがあるかを調べる裏技も紹介 | 誰かのためのホームページ制作

すみません、↑これじゃなかったです。
↓これでした。
HTML読み込み完了前に、HTML要素に処理を行おうとしている | jQueryが動かない原因と対処法をご紹介！ | Qumeruマガジン

スクリプトは読み込まれた時に実行されます。
ですので、script.js が実行された時には .header-btn などがまだ読み込まれていないので、存在しません。
存在しない要素にスクリプトを動作させても上手くいかないです。

ロードイベントを拾うか、スクリプトを</body>に置いてみてはどうですか？

js
1$(() => {
2  console.log(0);
3  $('.header-btn').click(function () {
4    if ($('#header').hasClass('open')) {
5      $('#header').removeClass('open');
6    }
7    else {
8      $('#header').addClass('open');
9
10    }
11    return false;
12  }
13  );
14})