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

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

ただいまの
回答率

91.36%

  • JavaScript

    11258questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

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

解決済

回答 3

投稿 2016/01/15 14:42

  • 評価
  • クリップ 1
  • VIEW 7,985

KenKimura

score 55

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

==================

前提・実現したいこと

ボタンをクリックすることで、ボタンに書いていある文字を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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+1

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

document.addEventListener("DOMContentLoaded", function(){
    document.getElementById('btn').addEventListener('click', function(){
        if(!isStarted){
            isStarted = true;
            this.innerHTML = 'STOP';
        }else{
            isStarted = false;
            this.innerHTML = 'START';
        }           
    });
}, false);

投稿 2016/01/15 15:32

編集 2016/01/15 15:34

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/01/18 10:14

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

    キャンセル

  • 2016/01/18 15:10

    coba-cobaさん
    時間が経ってしまい、そもそもの質問をするのがお恥ずかしいのですが、
    if(!isStarted)の!は何故つける必要があるのでしょうか?

    フリーの学習サイトで学ぶ過程でこの記述だったのですが、よく考えればそもそも意味が分かっておらず。。。

    何卒、よろしくお願いします。

    キャンセル

checkベストアンサー

0

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

投稿 2016/01/15 15:03

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/01/15 16:13

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

    キャンセル

0

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

投稿 2016/01/15 15:36

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/01/18 10:10

    コメントありがとうございます!
    ご教示いただきましたどちらの方法でも解決ができました。ありがとうございます。

    キャンセル

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

ただいまの回答率

91.36%

関連した質問

同じタグがついた質問を見る

  • JavaScript

    11258questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。