jQueryが動かない

自分で組んだテンプレートで二つの異なるサイトをコーディングしましたが、下に貼っているコードのサイトだけjQueryが効きません。テンプレートはヘッダーと、フッター下のjQueryに関する２つの<script>を記述しておいた簡単なものです。

実現したいこと

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">
6    <meta name="description" content="">
7    <title></title>
8    <script src="https://kit.fontawesome.com/19614859c0.js" crossorigin="anonymous"></script>
9    <link rel="stylesheet" href="normalize.css">
10    <link rel="stylesheet" href="main.css">
11  </head>
12  <body>
13
14    <!-- ====== header ====== -->
15    <header>
16      <div class="container">
17        <div id="header">
18      <h2 id="header-logo"><a href="#">My Work</a></h2>
19      <nav id="header-nav">
20        <ul>
21          <li><a href="#">About</a></li>
22          <li><a href="#">Work</a></li>
23          <li><a href="#">News</a></li>
24          <li><a href="#">Contact</a></li>
25          <li><a href="#"><i class="fa-solid fa-camera"></i></a></li>
26        </ul>
27      </nav>
28      <button id="header-button"></button>
29    </div>
30    </div>
31    </header>
32
33    <!-- ====== main ====== -->
34    <main>
35     <img src="../images/mainvisual-pc.jpg" id="main-image"> 
36
37     <div class="container">
38       <div class="heading">
39         <h2>About</h2>
40       </div>
41       <div class="about-text">
42       <p class="about-big about">Xxxxx Ashley</p>
43       <div class="about-p-about">
44       <p class="about-p about">2th Floor xxxxx Building x-x-x Nishiazabu, Minato-ku, Tokyo 106-0031 Japan</p>
45       <p class="about-p about">tel: 000-0000-0000</p>
46       <p class="about-p about">url: www.xxxxxx.jp</p>
47       <p class="about-p about">mail: xxx@xxxxxx.jp</p>
48      </div>
49       <p class="about-big about">プロフィールテキストテキストテキストテキストテキストテキストテキストテキストテキストスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
50      </div>
51
52
53       <div class="heading">
54       <h2>Works</h2>
55      </div>
56       <div class="works">
57         <img src="../images/works1.jpg">
58         <img src="../images/works2.jpg">
59         <img src="../images/works3.jpg">
60         <img src="../images/works4.jpg">
61         <img src="../images/works5.jpg">
62         <img src="../images/works6.jpg">
63       </div>
64     
65
66       <div class="heading">
67         <h2>News</h2>
68       </div>
69       <div class="news">
70        <dl>
71          <div class="di">
72            <dt>2020.XX.XX</dt>
73            <dd>デザイン雑誌「ＸＸＸＸＸＸ Vol.11』に掲載していただきました</dd>
74          </div>
75          <div class="di">
76            <dt>2020.XX.XX</dt>
77            <dd>ＸＸ月ＸＸ日から写真集「ＸＸＸＸＸＸＸ」の販売を開始します。</dd>
78          </div>
79          <div class="di">
80            <dt>2019.XX.XX</dt>
81            <dd>【イベント開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト</dd>
82          </div>
83          <div class="di">
84            <dt>2019.XX.XX</dt>
85            <dd>デザイン雑誌「ＸＸＸＸＸＸ Vol.10』に掲載していただきました。</dd>
86          </div>
87          <div class="di">
88            <dt>2019.XX.XX</dt>
89            <dd>【個展開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト</dd>
90          </div>
91        </dl>
92      </div><!-- /news -->
93
94      <div class="heading">
95        <h2>Contact</h2>
96      </div>
97      <form action="" method="">
98        <table>
99          <tr>
100            <th><label for="name">NAME</label></th>
101            <td><input type="text" name="name" id="name"></td>
102          </tr>
103          <tr>
104            <th><label for="e-mail">E-mali</label></th>
105            <td><input type="text" name="e-nail" id="e-mail"></td>
106          </tr>
107          <tr>
108            <th><label for="message">MESSAGE</label></th>
109            <td><textarea name="message" id="message"></textarea></td>
110          </tr>
111        </table>
112        <div class="submit-button">
113        <input type="submit" value="送信" id="submit">
114      </div>
115      </form>
116     </div><!-- /container -->
117    </main>
118
119    <!-- ====== footer ====== -->
120     <footer>
121      <p>&copy; 2020 My Work</p>
122     </footer>
123
124
125     <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
126      <srcipt src="script.js"></srcipt>
127  </body>
128</html>

CSS
1@charset "utf-8";
2
3.container {
4  max-width: 800px;
5  margin: 0 auto;
6}
7
8/* ====== header ====== */
9header {
10  padding: 100px 0;
11}
12
13#header-logo {
14  font-weight: normal;
15}
16
17#header-logo a {
18  color: black;
19  text-decoration: none;
20}
21
22#header {
23  display: flex;
24  align-items: center;
25  justify-content: space-around;
26}
27
28#header-nav li {
29  display: inline-block;
30  padding-left: 25px;
31}
32
33#header-nav a {
34  text-decoration: none;
35  color: black;
36}
37
38#header-nav a:hover {
39  opacity: 0.7;
40}
41
42button {
43  display: none;
44}
45
46@media(max-width: 768px) {
47 button {
48    display: block;
49}
50
51  #header-nav {
52    width: 100%;
53    height: calc(100% - 127px);
54    display: none;
55    background: white;
56    opacity: 0.9;
57  }
58
59  #header-nav ul {
60    position: absolute;
61    top: 50%;
62    left: 50%;
63    transform: translate(-50%, -50%);
64  }
65
66  #header-button {
67    background: url(../images/hamburger.png);
68    background-size: cover;
69    border-radius: 4px;
70    width: 50px;
71    height: 50px;
72  }
73
74  header {
75    padding: 30px 0;
76  }
77}
78
79/* ====== main ====== */
80#main-image {
81  width: 100%;
82  height: 400px;
83  object-fit: cover;
84}
85
86.heading {
87  text-align: center;
88  padding-top: 80px;
89}
90
91@media(max-width: 768px) {
92  #main-image {
93    object-position: 90% 0;
94  }
95}
96
97/* about */
98.about-p-about {
99  padding: 27px 0;
100}
101.about-big {
102  line-height: 1.5;
103  font-size: 14px;
104}
105.about-p {
106  margin: 4px;
107  font-size: 14px;
108}
109
110.about-text {
111  padding: 80px 12px 0;
112}
113
114/* works */
115.works img {
116  width: 33%;
117  padding: 13px;
118  box-sizing: border-box;
119}
120
121.works {
122  display: flex;
123  flex-wrap: wrap; 
124}
125
126@media(max-width: 768px) {
127  .works {
128    flex-flow: column;
129  }
130
131  .works img {
132    width: 100%;
133  }
134}
135
136/* news */
137.news dl {
138  border-collapse: collapse;
139  display: table;
140  width: 100%;
141  border-bottom: 1px solid #999;
142}
143.news .di {
144  display: table-row;
145  border-top: 1px solid #999;
146}
147.news dt, .news dd {
148  display: table-cell;
149  padding: 15px 0;
150  font-size: 14px;
151  box-sizing: border-box;
152}
153.news dt {
154  padding-left: 10px;
155  padding-right: 20px;
156  white-space: nowrap;
157}
158.news dd {
159  width: 79%;
160  padding-right: 10px;
161}
162
163@media(max-width: 768px) {
164  .news {
165    padding: 0 10px;
166  }
167
168  .news dt, .news dd {
169    font-size: 12px;
170  }
171}
172
173/* contact */
174form {
175  padding-bottom: 100px;
176}
177
178table {
179  padding: 0 5px;
180}
181
182th {
183  font-weight: normal;
184  text-align: left;
185  width: 150px;
186  vertical-align: top;
187}
188
189#name,#e-mail {
190  width: 645px;
191  line-height: 2;
192}
193
194textarea {
195  height: 9em;
196  width: 645px;
197  resize: none;
198}
199
200#name,#e-mail,textarea {
201  border: 1px solid rgb(223, 223, 223);
202}
203
204.submit-button {
205  text-align: center;
206  padding-top: 50px;
207}
208
209td {
210  line-height: 0;
211}
212
213#submit {
214  padding: 18px 90px;
215  background: rgb(0, 0, 17);
216  color: white;
217  border: 1px solid rgb(0, 0, 17);
218}
219
220#submit:hover {
221  cursor: pointer;
222  background-color: white;
223  border: 1px solid rgb(0, 0, 17);
224  color: black;
225}
226
227@media(max-width: 768px) {
228  form table,form tbody,form tr,form th,form td,label{
229    display: block;
230  }
231
232  form tbody,form tr,form th,form td,#name,#e-mail,#message,label {
233    width: 100%;
234    box-sizing: border-box;
235  }
236
237  form tr {
238    padding-top: 20px;
239  }
240}
241
242/* ======footer ====== */
243footer {
244  text-align: center;
245  background: rgb(31, 31, 31);
246  padding: 15px 0;
247}
248
249footer p {
250  color: white;
251  font-size: 10px;
252  margin: 0;
253  vertical-align: middle;
254}
255

jQuery
1$(function(){
2  alert('ok')
3});

試したこと

$(function(){　～　});を
$(window).on('load', function() {　～　});、
$(document).ready(function() {　～　});に変えましたが変化なし。
検証ツールでもファイルのエラーは確認できませんでした。
全角スペースもありません。

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

dynabook V72/JLE
型番:PV82JLECNRDQE

m.ts10806

2022/04/06 20:20

CSSもHTMLもほぼなくして最小構成でそこだけを試してみて結果を追記してください。

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

回答2件

ベストアンサー

typoです。
<srcipt→<script

投稿2022/04/07 00:52

Lhankor_Mhy

総合スコア36057

amagiri

2022/04/07 02:17

記述ミスのチェックが甘かったんですね。ありがとうこざいます！

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

「jQueryが動かない」とありますが...

JSファイルが読み込まれていない
JavaScriptが動かない
jQueryが動かない

は全て意味が違います。「jQueryが動かない」が原因なら、jQueryへのパスが間違っているとか、jQueryを挿入する位置が悪いなどが考えられますが、jQueryへのパス（...というかURL）は絶対パスなのでこれが間違っているなら2つのファイルとも動かないと思います。
なのでまず3の可能性は低いですよね👀

2が原因の可能性はブラウザ関係でJavaScriptがブロックされているなどが考えられますが、これも2つのファイルとも動かなくなると思いますので、可能性は低いです。

...となると1がかなり濃厚かな〜と推測しますし、現にscript.jsが相対パスなのがさらに疑わしいですよね👀
script.jsは./script.jsという意味なので、ファイルが置いてある場所と同じ場所にscript.jsが無いと動きませんよ？そこは確認済みでしょうか？

私の経験上ですが、ほとんど内容をいじっていない複数のファイルの内、片方だけが動かないなんて時は大体ファイルの位置を動かしたことが原因でパスが崩れている場合が9割型です😅
（なので、私は相対パスはほとんど使いません👀）

参考になれば幸いです😊

投稿2022/04/06 15:46