回答編集履歴

1

質問にソースコードが追加されたため編集

2020/05/04 14:39

投稿

miyacorata
miyacorata

スコア20

test CHANGED
@@ -8,13 +8,65 @@
8
8
 
9
9
 
10
10
 
11
- 従ってまず確認していただきたいのは次の2つです
11
+ ~~~従ってまず確認していただきたいのは次の2つです~~~
12
12
 
13
13
 
14
14
 
15
- * addEventListenerを追加したい要素のIDが間違っていないか ("btn"ではなく"button"と書いていませんか?)
15
+ * ~~~addEventListenerを追加したい要素のIDが間違っていないか ("btn"ではなく"button"と書いていませんか?)~~~
16
16
 
17
17
  * `<script>`をaddEventListenerを追加したい要素よりも上に置いていないか(補足参照)
18
+
19
+
20
+
21
+ #### 追記
22
+
23
+ 回答を書いている間にソースコードが追加されていてよかったです。今回の場合は追加したい要素よりも先にJSのコードを置いたことによりJSが要素を参照できないエラーでした。
24
+
25
+
26
+
27
+ また重箱の隅をつつくようですが、`<div id="btn">`が`</body>`より後ろにあるとHTMLをしては誤りです。
28
+
29
+ ですので今回の場合は
30
+
31
+ ```
32
+
33
+ <!DOCTYPE html>
34
+
35
+ <html lang="ja">
36
+
37
+
38
+
39
+ <head>
40
+
41
+ <meta charset="utf-8">
42
+
43
+ <title>おみくじ</title>
44
+
45
+ <link rel="stylesheet" href="css/styles.css">
46
+
47
+ </head>
48
+
49
+
50
+
51
+ <body>
52
+
53
+ <div id="btn">?</div> <!-- 本文は <body> と </body> の中に -->
54
+
55
+ <script src="js/main.js"></script> <!-- (今回の場合は)要素よりも後ろに -->
56
+
57
+ </body>
58
+
59
+
60
+
61
+ </html>
62
+
63
+ ```
64
+
65
+ とするとご質問にあったエラーは発生しなくなります。
66
+
67
+
68
+
69
+ (ぜひこの機会にHTMLの決まりごともあわせて調べてみてくださいね。)
18
70
 
19
71
 
20
72