javascriptが動作しない

javascriptが動作しないのですがなぜでしょうか？

html
1<!DOCTYPE html>
2<html>
3  <head>
4  	<meta charset="UTF-8">
5  	<title>javascriptの練習</title>
6  	<link rel="stylesheet" href="./index.css">
7  </head>
8  <body>
9  	<div class="ham" id="ham">
10  	  <span class="ham-line ham-line1"></span>
11  	  <span class="ham-line ham-line2"></span>
12  	  <span class="ham-line ham-line3"></span>
13      <!-- javascriptの読み込み -->
14      <script type="text/javascript" src="index.javascript"></script>
15  	</div>
16
17
18  </body>
19</html>

css
1.ham {
2	position: relative;
3	width: 40px;
4	height: 40px;
5	cursor: pointer;
6	background-color: aqua;
7}
8
9.ham-line {
10	position: absolute;
11	left: 10px;
12	width: 20px;
13	height: 1px;
14	background-color: #333333;
15	transition: all 0.3s;
16}
17
18.ham-line1 {
19	top: 10px;
20}
21
22.ham-line2 {
23	top: 18px;
24}
25
26.ham-line3 {
27	top: 26px;
28}
29
30.clicked .ham_line1 {
31	transform: rotate(45deg);
32	top: 20px;
33}
34.clicked .ham_line2 {
35	width: 0px;
36}
37.clicked .ham_line3 {
38	transform: rotate(-45deg);
39	top: 20px;
40}

javascript
1const ham = document.getElementById('ham');
2ham.addEventListener('click', function() {
3	ham.classList.toggle('clicked');
4});

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

回答3件

上のかたがたの回答に加えてcssに書き損じがあります
ham_lineのところ
htmlで書いたところと見比べましょう

投稿2020/08/20 09:32

ransuS_T

総合スコア106

退会済みユーザー

2020/08/20 10:20

誤字っていました。見つけていただきありがとうございます。

退会済みユーザー

2020/08/20 10:23

なんとか思うようにうごきましたありがとうございました！

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

意図する動きとは異なると思いますが、例えば下記のようなt.clickedをstylesheetに追加してみれば動いたりしないでしょうか？

.clicked {
    transform: rotate(-45deg);
    top: 20px;
}

投稿2020/08/20 09:28

tomomo

総合スコア430

退会済みユーザー

2020/08/20 10:12

そのコードをstylesheetに追加すると動きました。

退会済みユーザー

2020/08/20 10:23

誤字とhtmlを直したら動きましたありがとうございます！

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

ベストアンサー

script要素が、ターゲット要素の中に入っているからではないでしょうか。

html
1<body>
2  <div class="ham" id="ham">
3    <span class="ham-line ham-line1"></span>
4    <span class="ham-line ham-line2"></span>
5    <span class="ham-line ham-line3"></span>
6  </div>
7
8  <!-- javascriptの読み込み ここに移動 </body>の直前に -->
9  <!-- そして、JavaScriptファイルの拡張子は、.jsです。 -->
10  <script src="index.js"></script>
11</body>

それでだめなら、JavaScriptを下記に修正します。

javascript
1document.addEventListener('DOMContentLoaded', event => {
2  // HTMLパースが完了してから実行する領域
3  const ham = document.getElementById('ham');
4  ham.addEventListener('click', function() {
5    ham.classList.toggle('clicked');
6  });
7});

つまり、div#hamが読み込まれてから実行するというのがポイントってことです。

もし、上記二つともやってだめなら、
そもそもそのJavaScriptファイルの読み込みがされていませんので、ファイルのパスなどを確認してください。

動作しないのですがなぜでしょうか？

なぜかを解説すると、
ブラウザがどういった順序でレンダリングするか、が関わってきます。
まず、基本は上から下に、レンダリングやソースの解析を行なっていきますが、
基本的に、script要素が出現するたびに、そのソースコードの解析が始まり、
HTMLのパースは一時中断されます。
つまり、質問者さんのHTML構文では、下記のような現象が起きています。