JS DOM のエラー、 'innerHTML' of nullが解決しません。

前提・実現したいこと

innerHTMLで要素内のテキストを変更しようとしています。

<h2>タグ内の30:00が25:00に変更したいです。

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

Uncaught TypeError: Cannot set property 'innerHTML' of nullというエラーが発生し上手く行きません。
JSFiddleのようなwebの環境であれば問題なくテキストを変更でき、30:00が25:00に変更されるのですが
(参考URL: https://jsfiddle.net/doyaface/qf04eLc3/1/)
ローカル環境だと上記のようなエラーが発生してしまいます。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <script type="text/javascript" src="main.js"></script>
6  <link rel="stylesheet" href="main.css">
7  <meta name="viewport" content="width=device-width, initial-scale=1.0">
8  <meta http-equiv="X-UA-Compatible" content="ie=edge">
9  <title>Pomodoro Simple Timer</title>
10</head>
11<body>
12  <div class="container">
13    <h1>Pomodoro Simple Timer</h1>
14    <h2 id = "timer">30:00</h2>
15    <ul class="btn-list">
16      <li>
17        <div id="start-btn" class="btn start-btn">Start</div>
18      </li>
19      <li>
20        <div id="stop-btn" class="btn stop-btn">Stop</div>
21      </li>
22      <li>
23        <div id="reset-btn" class="btn reset-btn">Reset</div>
24      </li>
25    </ul>
26  </div>
27
28</body>
29</html>

javaScript
1let start;
2let timer_id;
3
4const addZero = value => {
5  if (value < 10) {
6    value = "0" + value;
7  }
8  return value;
9};
10
11  start = new Date();
12  let goal = new Date();
13  goal.setMinutes(start.getMinutes() + 25);
14  let milli = goal.getTime() - start.getTime();
15  let seconds = Math.floor(milli / 1000);
16  let minutes = Math.floor(seconds / 60);
17  seconds = seconds - minutes * 60;
18  minutes = addZero(minutes);
19  seconds = addZero(seconds);
20  document.getElementById("timer").innerHTML = minutes + ':' + seconds ;

試したこと

JSfiddleにコードを書き、正常に動くか確認

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

回答2件

ベストアンサー

いちばんかんたんな対処法としては、<script>を</body>の直前に移動してください。

DOMContentLoadedやonloadなどを使わずに直接書いたJavaScriptは、HTMLと同期的に上から読み込まれて実行されます。<head>の中にあるJavaScriptを実行する段階では、<body>はまだ構築されておらず、document.getElementById("timer")は空振りとなります。

投稿2019/10/28 12:29

編集2019/10/28 12:31

maisumakun

総合スコア145963

Doyaface

2019/10/28 13:01

ありがとうございます。アドバイス通り<script>を</body>の直前に移動したら解決いたしました。教えていただいた、DOMContentLoadedやonloadについても調べてみます。ありがとうございました！

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

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  let start;
4  let timer_id;
5  const addZero = value => {
6    if (value < 10) {
7      value = "0" + value;
8    }
9    return value;
10  };
11  start = new Date();
12  let goal = new Date();
13  goal.setMinutes(start.getMinutes() + 25);
14  let milli = goal.getTime() - start.getTime();
15  let seconds = Math.floor(milli / 1000);
16  let minutes = Math.floor(seconds / 60);
17  seconds = seconds - minutes * 60;
18  minutes = addZero(minutes);
19  seconds = addZero(seconds);
20  document.getElementById("timer").innerHTML = minutes + ':' + seconds ;
21});
22</script>
23<div class="container">
24<h1>Pomodoro Simple Timer</h1>
25<h2 id = "timer">30:00</h2>
26<ul class="btn-list">
27<li>
28<div id="start-btn" class="btn start-btn">Start</div>
29</li>
30<li>
31<div id="stop-btn" class="btn stop-btn">Stop</div>
32</li>
33<li>
34<div id="reset-btn" class="btn reset-btn">Reset</div>
35</li>
36</ul>
37</div>