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

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

新規登録して質問してみよう
ただいま回答率
85.47%
JavaScript

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

Q&A

解決済

1回答

1112閲覧

javascript エラー「cannot read property 'addeventlistener' of null」が解決できない

begine

総合スコア7

JavaScript

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

0グッド

0クリップ

投稿2020/06/22 16:02

編集2020/06/30 06:36

エラーの「cannot read property 'addeventlistener' of null」が解決できない

javascriptでカウントダウンタイマー付きのクイズを作成しようと思っています。

流れとしては、スタートボタンを押したら画面が切り替わって「問題とカウントダウンタイマーの表示と起動」。
問題に全て答えるか、タイマー0で強制終了させる。

といったものと考えコードを書いていったのですが、エラー「cannot read property 'addeventlistener' of null」が発生してしまい困っています。
よろしくお願いします。

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

cannot read property 'addeventlistener' of null

ソースコード

html

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Quiz</title> 6 <link rel="stylesheet" href="css/styles.css"> 7 </head> 8 <body> 9 <section class="container2"> <!-- スタート画面--> 10 <p>ボタンクリックで時間制限のあるクイズが始まります。</p> 11 <div class="sbtn_move"> 12 <button id="sbtn" type="button" onclick="location.href='quiz.html'">START</button> 13 </div> 14 </section> 15 16 <script src="js/main.js"></script> 17 </body> 18</html>

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>Quiz</title> 6 <link rel="stylesheet" href="css/styles.css"> 7</head> 8<body> 9 <section class="container"> <!-- クイズ画面--> 10 <p id="question"></p> <!--問題文,jsで扱いやすいようにidを使う。--> 11 <ul id="choices"> <!--選択肢--> 12 </ul> 13 <div id="btn" class="disabled">Next</div> <!--次の問題に進むボタン,押せない状態のボタン--> 14 15 <section class="container3"> 16 <div id="timer">00:00.000</div> <!--カウントダウンタイマーを表示--> 17 </section> 18 <section id="result" class="hidden"> <!--結果画面,最初はクラスで画面外へ隠す--> 19 <p></p> 20 <a href="index.html">Replay?</a> <!--ページ再読み込みでゲームを最初から始める--> 21 </section> 22 </section> 23 24 <script src="js/main.js"></script> 25</body> 26</html>

javascript

1'use strict'; 2 3{ 4 const timer = document.getElementById('timer'); //1 5 const sbtn = document.getElementById('sbtn'); //2 6 7 let startTime; //STARTボタンを押したときの時刻(宣言) 8 let timeLeft; 9 const timeToCountDown = 4 * 1000; // 1000 = 1秒 10 11 /*constは初期化が必要 const X = 数値、もしくは初期化しない場合は let x; */ 12 13 function countDown() { // countDownの宣言 14 setTimeout (function() { // 次の処理を指定したミリ秒後に実行(1度だけ) 15 // const elapsedTime = Date.now() - startTime; 経過時間 = 現在時刻 - スタートした時間 16 // timeLeft = timeToCountDown - elapsedTime; 残り時間 = カウントダウン時間 - 経過時間 17 timeLeft = timeToCountDown - (Date.now() - startTime); 18 //elapsedTimeは、1度しか使わないので直接代入した↑ 19 console.log(timeLeft); 20 countDown(); //countDownを再帰的に呼び出したいため、ここで呼ぶ。 21 }, 10); 22 } 23 24 sbtn.addEventListener('click', function() { //STARTボタンがクリックされたらタイマーON 25 startTime = Date.now(); // 押したときの時刻を取得 26 countDown(); /* カウントダウン機能は setTimeoutを使い再帰的に実行させるため countDown() という名前の別関数にする。*/ 27 });

試したこと

エラー文を検索してみたのですが、よくわかりませんでした。

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

index.htmlにid="sbtn"要素がなかったためid要素を作り、その画面には表示させたくなかったためhiddenをつけることで解決できました。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

id="sbtn"の要素を押すとonclick="location.href='quiz.html'"で別ページに移動します。
そのページにはid="sbtn"の要素が無いのでエラーになります。

投稿2020/06/22 16:07

kei344

総合スコア69430

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

begine

2020/06/22 16:14

解決できました、ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問