javascriptでストップウォッチを作っててTypeError: timer is nullが表示される

ドットインストールを一部参考にjavascriptでストップウォッチを作っているのですが、下のコードでTypeError: timer is nullというエラーが発生します。

html・javascript
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5	<meta charset="utf-8">
6	<link rel="stylesheet" href="styles.css">
7	<title>StopWatch</title>
8	<script>
9		var timer = document.getElementById('timer');
10		var c = 0;
11		var elapsedTime = 0;
12		var x = 0;
13
14		function updateTimerText() {
15			var m = Math.floor(elapsedTime / 60000);
16			var s = Math.floor(elapsedTime % 60000 / 1000);
17			var ms = elapsedTime % 1000;
18			timer.textContent = m + ' : ' + s + ' . ' + ms;
19		}
20
21		function countUp() {
22			setTimeout(function () {
23				elapsedTime = Date.now() - startTime;
24				updateTimerText();
25				countUp();
26			}, 10);
27		}
28
29		//スタート
30		var startTime;
31		var start =
32			function start(str) {
33				startTime = Date.now();
34				countUp();
35				
36			}
37
38		//ストップ
39
40		var stop =
41			function stop(str) {
42				
43			}
44
45		//リセット
46		var re =
47			function re(str) {
48			}
49
50	</script>
51</head>
52
53<body>
54	<div id="timer">00:00:00</div>
55	<!--スタート-->
56	<form id="Start">
57		<p>
58			<input type="button" value="スタート" onclick="start('スタート');">
59		</p>
60	</form>
61	<!--ストップ-->
62	<form id="Stop">
63		<p>
64			<input type="button" value="ストップ" onclick="stop('ストップ');">
65		</p>
66	</form>
67	<!--リセット-->
68	<form id="Re">
69		<p>
70			<input type="button" value="リセット" onclick="re('リセット');">
71		</p>
72	</form>
73	<script>
74
75	</script>
76</body>
77
78</html>
79

ブラウザはfire fox　を使用しています
よろしくお願いします

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

回答4件

ベストアンサー

var timer = document.getElementById('timer');がid="timer"の要素より上に書かれているため、JavaScriptを実行した段階ではまだ存在せずエラーとなります。

対策としては、

JavaScriptを下に移動する
要素が出揃うDOMContentLoadedを待つ

の2つがあります。

投稿2018/03/30 08:41

maisumakun

総合スコア145183

puroguraminng

2018/04/01 07:22

ありがとうございます???? 解決しました！

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

もう用意してあるようですが、<script>～</script>の内容を</body>直前に移動してください。

投稿2018/03/30 08:43

x_x

総合スコア13749

puroguraminng

2018/04/01 07:23

ありがとうございます????

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

タイプエラーかもしれません。

var timer = document.getElementById('timer');　ではなく、
var timer = document.getElementsById('timer'); です。

投稿2018/03/31 02:05

退会済みユーザー

総合スコア0

kei344

2018/03/31 02:08

違うと思いますよ。【document.getElementById - Web API インターフェイス | MDN】 https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById

退会済みユーザー

2018/03/31 02:12

失礼いたしました！こちらと混同しておりました。 document.getElementsByClassName(element);

puroguraminng

2018/04/01 07:22

ありがとうございます????

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

ちなみに、maisumakunさんの回答にある、

要素が出揃うDOMContentLoadedを待つ

はこう書く。

<script>
window.onload=function(){
  // ここより下の行に処理を書く。

  // ここより上の行に処理を書く。
};
</script>

投稿2018/03/30 08:54

tkturbo

総合スコア5572

x_x

2018/03/30 09:08

厳密にはDOMContentLoadedとwindow.loadは別のイベントでタイミングも異なります。 https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded > DOMContentLoaded が適切な場合に load を使うのはよくある間違いですので、注意してください。

退会済みユーザー

2018/03/31 02:10

厳密には、 window.addEventListener('load', fn, false); onload は HTMLファイルなどの読み込みが完了したら実行です。 window.addEventListener('DOMContentLoaded', fn, false); DOMContentLoaded は最初のHTMLファイルの読み込みが完了したら実行です。

puroguraminng

2018/04/01 07:23

ありがとうございます????

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

あなたの回答