【JS】addEventListenerが機能しない理由についてご教示ください

プログラミング初心者です。
初歩的なミスかと思いますが原因が分からず
どこにミスがあるのかご教示いただけないでしょうか。
よろしくお願いします。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

###前提・実現したいこと

ボタンをクリックすることで、ボタンに書いていある文字をinnerHTMLで変更したい。

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

クリックしても文字が変更されません。
JSコンソールでは以下のようなアラートで、addEventListenerが機能していなとのことです。

Uncaught TypeError: Cannot read property 'addEventListener' of null

###ソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Stop at 00:05game</title>

<style>

    body{
        background: #e0e0e0;
        text-align: center;
        font-size: 16px;
        font-family: Arial,sans-serif;
    }
    
    #result{
        font-weight: bold;
        font-size:32px;
        margin: 60px auto;
        color:#00aaff;
        text-shadow: 0 1px 0 rgba(255,2555,255,0.5);}
    
    #btn{
        margin:0 auto;
        width: 200px;
        padding: 10px;
        color:#fff;
        border-radius: 5px;
        background: #0af;
        box-shadow: 0 4px 0 #08c;
        cursor:pointer;
    }
    
    #btn:hover{
        opacity: 0.5;
    }
    
</style>

<script>
(function(){
    'use strict';
    var isStarted = false;
    
    var result = document.getElementById('result');
    var btn = document.getElementById('btn');
    
    btn.addEventListener('click', function(){
        if(!isStarted){
            isStarted = true;
            this.innerHTML = 'STOP';
        }else{
            isStarted = false;
            this.innerHTML = 'START';
        }           
     });
})();
</script>

</head> <body> <div id = "result">Stop at 00:05</div> <div id = "btn">START</div> </body> </html>

###補足情報(言語/FW/ツール等のバージョンなど)

OS ：Mac Yosemite 10.10.5
ブラウザ：chrome最新ver
エディタ：Brackets

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

回答4件

ベストアンサー

HTMLは上から順番に解釈されていきます。javascriptが解釈されて実行開始されたときには、bodyは解釈されておらず、したがって#btnも存在せず、document.getElementById('btn')にはnullが戻り、nullにはaddEventListenerメソッドが存在しないため、エラーになっています。

投稿2016/01/15 06:03

Lhankor_Mhy

総合スコア36908

K_9301

2016/01/15 07:13

ご回答有り難うございます。解決できました。素早くご回答いただきましたのでベストアンサーにさせて頂きます。

kuroro1991

2019/01/04 12:40

おなじ箇所で躓いていたので参考になりました。

Lhankor_Mhy

2019/01/04 13:56

お役に立てたようで幸甚です。

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

Lhankor_Mhyさんのおっしゃる通り、HTMLの読み込みとパースが終わってから、ボタンクリック時のイベントを設定しましょう。
JavaScriptは<head></head>内でロードする場合も考慮して、次のようにすればいいと思います。

JavaScript
1document.addEventListener("DOMContentLoaded", function(){
2	document.getElementById('btn').addEventListener('click', function(){
3		if(!isStarted){
4			isStarted = true;
5			this.innerHTML = 'STOP';
6		}else{
7			isStarted = false;
8			this.innerHTML = 'START';
9		}           
10	});
11}, false);

投稿2016/01/15 06:32

編集2016/01/15 06:34

coba-coba

総合スコア1409

K_9301

2016/01/18 01:14

ありがとうございます！教えていただきました記述で機能しました。DomContentLoadedというのがあるのも初めて知ったので大変勉強になりました。

K_9301

2016/01/18 06:10

coba-cobaさん時間が経ってしまい、そもそもの質問をするのがお恥ずかしいのですが、 if(!isStarted)の!は何故つける必要があるのでしょうか？フリーの学習サイトで学ぶ過程でこの記述だったのですが、よく考えればそもそも意味が分かっておらず。。。何卒、よろしくお願いします。

OrangeHanzo

2018/06/21 09:07

めちゃめちゃ今更ですが "!"で否定です !をつけることによりisStartedが0なら真、それ以外なら偽となります

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

解決策としては<script>~</script>をbodyタグの一番下に移動させるか、
onloadで処理するようにすることですね。
JSの基本機能でも用意されていますし、JQueryにも用意されています。
あと、ここで無名関数として書く必要は無いのでは？
参考↓
http://www.tam-tam.co.jp/tipsnote/javascript/post601.html

投稿2016/01/15 06:36