teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

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

2020/05/04 14:39

投稿

miyacorata
miyacorata

スコア20

answer CHANGED
@@ -3,11 +3,37 @@
3
3
  ここでコード4行目を見直します。
4
4
  `const btn = document.getElementById('btn');`とされていますが`getElementById()` は指定したIDの要素が存在しない場合は `null` が返る事になっています。
5
5
 
6
- 従ってまず確認していただきたいのは次の2つです
6
+ ~~~従ってまず確認していただきたいのは次の2つです~~~
7
7
 
8
- * addEventListenerを追加したい要素のIDが間違っていないか ("btn"ではなく"button"と書いていませんか?)
8
+ * ~~~addEventListenerを追加したい要素のIDが間違っていないか ("btn"ではなく"button"と書いていませんか?)~~~
9
9
  * `<script>`をaddEventListenerを追加したい要素よりも上に置いていないか(補足参照)
10
10
 
11
+ #### 追記
12
+ 回答を書いている間にソースコードが追加されていてよかったです。今回の場合は追加したい要素よりも先にJSのコードを置いたことによりJSが要素を参照できないエラーでした。
13
+
14
+ また重箱の隅をつつくようですが、`<div id="btn">`が`</body>`より後ろにあるとHTMLをしては誤りです。
15
+ ですので今回の場合は
16
+ ```
17
+ <!DOCTYPE html>
18
+ <html lang="ja">
19
+
20
+ <head>
21
+ <meta charset="utf-8">
22
+ <title>おみくじ</title>
23
+ <link rel="stylesheet" href="css/styles.css">
24
+ </head>
25
+
26
+ <body>
27
+ <div id="btn">?</div> <!-- 本文は <body> と </body> の中に -->
28
+ <script src="js/main.js"></script> <!-- (今回の場合は)要素よりも後ろに -->
29
+ </body>
30
+
31
+ </html>
32
+ ```
33
+ とするとご質問にあったエラーは発生しなくなります。
34
+
35
+ (ぜひこの機会にHTMLの決まりごともあわせて調べてみてくださいね。)
36
+
11
37
  #### ※補足
12
38
  JSでHTMLの要素を参照するには`<script>`を`</body>`の直前に配置するよう習ったかと思います。
13
39