addEventListenerでエラーがでる

フリー学習サイトを参考にタイマーを作っているのですが作動しない原因がわかりません。綴りミスとかでしょうか？
startを押してstopを押したら経過時間が表示されるようにしたいです。
何卒ご教授お願いします。

javascript
1(function(){
2    'use strict';
3
4    var start = document.getElementById('start');
5    var stop = document.getElementById('stop');
6    var result = document.getElementById('result');
7    var startTime;
8
9    document.addEventListener("DOMContentLoaded", function(){
10        start.addEventListener('click',function(){
11        startTime = Date.now();
12        });
13    });
14    document.addEventListener("DOMContentLoaded", function(){
15        stop.addEventListener('click', function() {
16        var elapsedTime;
17    
18        elapsedTime = (Date.now()-startTime)/1000;
19        result.textContent=elapsedTime.toFixed(3);
20        });
21    });    
22})();

html
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <title>5 second</title>
7    <meta name="viewport" content="width=device-width, initial-scale=1">
8    <link rel="stylesheet" type="text/css" media="screen" href="css/styles.css"/>
9    <script src="js/main.js"></script>
10</head>
11<body>
12    <div class ="container">
13        <div id="target">5.000</div>
14        <div id="result">0.000</div>
15        <div id="buttons">
16            <div id="start">start</div>
17            <div id="stop">stop</div>
18        </div>
19    </div>
20
21</body>
22</html>

css
1.container{
2    font-family: 'Courier New', sans-serif;
3    width: 300px;
4    margin: 30px auto 0;
5    text-align: center;
6    font-weight: bold;
7}
8
9#target, #result{
10    font-size: 32px;
11    margin-bottom: 15px;
12    background: #ccc;
13    height: 60px;
14    line-height: 60px;
15}
16
17#start{
18    float:left;
19}
20
21#stop{
22    float:right;
23}
24
25#start,#stop{
26    cursor:pointer;
27    font-size: 18px;
28    width:145px;
29    background: #eee;
30    height: 40px;
31    line-height: 40px;
32    box-shadow: 0 6px 0 #ccc;
33}

OSはWindows
環境はchrome,Edgeなどで実行していますが、「 start.addEventListener('click', function() {」この行で同じエラーが出ます。

開発ツールはVisual Studio Codeを使用しています。

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

回答4件

ベストアンサー

はい、綴りミスですね。

javascript
1result.textContent = elapsedTime;

開発ツールで見るとエラーが出ているので、解消していくとたどり着けるはずです。

これで動くはず

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<script type="text/javascript">
6(function() {
7    'use strict';
8    
9    document.addEventListener("DOMContentLoaded", function(){
10
11	    var start = document.getElementById('start');
12	    var stop = document.getElementById('stop');
13	    var result = document.getElementById('result');
14	    var startTime;
15
16	    start.addEventListener('click', function() {
17	        startTime = Date.now();
18	    });
19
20	    stop.addEventListener('click', function() {
21	        var elapsedTime;
22	        elapsedTime = (Date.now()-startTime)/1000;
23	        result.textContent = elapsedTime;
24	    });
25    }, false);
26})();
27</script>
28</head>
29<body>
30    <div class ="container">
31        <div id="target">5.000</div>
32        <div id="result">0.000</div>
33        <div id="buttons">
34            <div id="start">start</div>
35            <div id="stop">stop</div>
36        </div>
37    </div>
38</body>
39</html>

投稿2018/04/16 14:10

編集2018/04/17 13:08

kszk311

総合スコア3404

tyapapa

2018/04/16 14:18

指摘されたところを直したのですがやはり動きません。開発ツールでおすすめありますか？

kszk311

2018/04/16 14:24

あ、開発ツールというのは、ブラウザで右クリックした時に出てくる「検証」とか「要素を調査」とかからの「コンソール」の事を言ってました。そこにエラー出てませんか？

tyapapa

2018/04/17 00:57

start.addEventListener('click', function() { この行にどうもエラーが出てます。

kszk311

2018/04/17 01:37

記述箇所が原因かもしれません。そのスクリプトはどこに書いている or 読み込んでいますか？ bodyの閉じかっこ直前に書くと多分なおります。

tyapapa

2018/04/17 03:08

jsフォルダの中のmain.js（js/main.js）というファイルに書いています。 body前に書いても同じ行にエラーが出ています。私の環境がこのイベントに対応していないのでしょうか？

kszk311

2018/04/17 05:14

環境により左右するのかどうかですが、HTML読み込んでから動作を行うよう、DOMContentLoadedをつけますか。そしたら動作すると思います。 https://teratail.com/questions/24714

tyapapa

2018/04/17 12:30

掲示されたURLを参考に指示通りのイベントを追加しましたがやはりだめですね。。。。

kszk311

2018/04/17 12:34

じゃ念のためOSとプラウザ、それとソース全体を記載してもらってもいいですか。

kszk311

2018/04/17 13:09

追記したソースを、まずはそのままコピペして確認してみてください。

kszk311

2018/04/17 13:20 編集

DOMContentLoadedの使い方がおかしかったようですね。 DOMContentLoadedの前（DOMを読み込む前）に、DOMを取得しようとしても取ってこれない、というわけです。

tyapapa

2018/04/18 01:33

動きました！本当にありがとうございます。

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

main.jsを以下のように変えたらどうでしょう？

JavaScript
1(function(){
2    'use strict';
3
4    var startTime;
5
6    document.addEventListener("DOMContentLoaded", function(){
7	    var start = document.getElementById('start'); // 移動
8        start.addEventListener('click',function(){
9        startTime = Date.now();
10        });
11    });
12    document.addEventListener("DOMContentLoaded", function(){
13	    var stop = document.getElementById('stop'); // 移動
14	    var result = document.getElementById('result'); // 移動
15        stop.addEventListener('click', function() {
16        var elapsedTime;
17
18        elapsedTime = (Date.now()-startTime)/1000;
19        result.textContent=elapsedTime.toFixed(3);
20        });
21    });    
22})();
23