addEventListenerがnullになる。

ここに質問の内容を詳しく書いてください。
Javascriptでストップウォッチを作っています。

発生している問題・エラーメッセージ

まず、startをクリックしたら....addEventListenerのイベントリスターがブラウザで検証すると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> ````````````ここに言語を入力 Javascript ```

試したこと

addEventListenerの上に、window.onload=()=>
を付けましたが、変わりませんでした。
ここに問題に対して試したことを記載してください。

yambejp

2020/03/24 13:39

ソースは前後の行を```で囲んで、きちんとマークダウンしてください

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

回答1件

script
1'use strict'
2window.addEventListener('DOMContentLoaded', ()=>{
3既存のソース;
4});

投稿2020/03/24 13:33

yambejp

総合スコア114843

yambejp

2020/03/24 13:34

ようは document.getElementById('start')で参照した時点でまだ、<button id="start">Start</button>はhtml上に登場してないので参照できないエラーになります

yambejp

2020/03/24 13:38

ちなみにaddEventListenerがnullになっているわけではありません getElementByIdで参照したdomがnullなので nullに対してaddEventListenerを実行しようとして失敗しています

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！