addEventListenerがnullになる

どっどインストールのレッスンを模写しております。ストップウォッチを作りたいです。
まず、startをクリックしたら....のイベントリスターがnullになります。
どっどインストールのソースコードをそのまま貼り付けてもnullになり、ボタンを押しても動きません。
どなたか助けていただきたいです。

私のコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Stopwatch</title> <script> 'use strict'; var timer = document.getElementById('timer'); var start = document.getElementById('start'); var stop = document.getElementById('stop'); var reset = document.getElementById('reset');

var startTime;

setTimeout(() => {
  countUp();
}, 10);

}

start.addEventListener('click', () => {
startTime = Date.now();
countUp();
});
</script>

</head> <body> <div id="timer">00:00.000</div> <button id="start">Start</button> <button id="stop">Stop</button> <button id="reset">Reset</button> </body> </html>

試したこと、
addEventListenerの上に、window.onload=()=>
を付けましたが、変わりませんでした。

m.ts10806

2020/03/24 13:19

コードはマークダウンのcode機能を利用してご提示ください。また、質問は編集できますので、新たに投稿しなおす必要はありません。片方削除依頼を出しておいてください

m.ts10806

2020/03/24 13:21

code機能の対応のさせかたの例： https://teratail.com/questions/238564 使えるマークダウン： https://teratail.com/help#about-markdown いずれにしても、コード部分がマークダウン対応されてないと読む気をなくす回答者も多いので覚えておかないと損しかないです。

m.ts10806

2020/03/24 13:25

ドットインストールやったことないのですけど、読み込みと実行順、DOM構築の仕組みを全く触れないんでしょうか。いずれにしても・・・要素が出現してない状態でgetしようとしても存在しないのは一般的に考えて当然ですよね。

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

回答1件

ドットインストールの JavaScriptでストップウォッチを作ろう (全12回) ってやつですね。最初の 3 回は無料なので見てみましたが、index.html と js/main.js を別々のファイルに書くことになってるようです。

実際には一つのファイルにまとめて書くこともできますが、重要なのは <script> タグの位置です。質問文のように <head> 〜 </head> の中に <script> タグを書くと、そのスクリプトは <body> が読み込まれる前に実行されてしまい、<body> の中にある <div id="timer">00:00.000</div> などはまだ存在しないので、document.getElementById('timer') などが nullになってしまいます。

動画では第 1 回の中で「ボディの閉じタグの直前に」と言ってる（特に理由は説明してませんが）ように、<script> は </body> の直前に書くといいでしょう。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>Stopwatch</title>
6</head>
7<body>
8  <div id="timer">00:00.000</div>
9  <button id="start">Start</button>
10  <button id="stop">Stop</button>
11  <button id="reset">Reset</button>
12
13  <script>
14'use strict';
15var timer = document.getElementById('timer');
16// 以下略
17  </script>
18</body>
19</html>