Q&A
前提・実現したいこと
前回質問した、「ボタンをクリックしたら別画面にあるカウントダウンタイマーを起動させたい」は、回答者様の記載して下さったコードを書いたら解決することができました。
「参考URL: https://teratail.com/questions/272247#reply-388610」
しかし見た目(機能的)には問題なかったのですが、デベロッパーツールで確認してみると以下のエラーが発生してしまい解決することができません。
よろしくお願いします。
Uncaught TypeError: Cannot set property 'textContent' of null main.js:23
at updateTimer (main.js:23)
at main.js:37
発生している問題・エラーメッセージ
Cannot set property 'textContent' 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 <section hidden> 16 <div></div> 17 </section> 18 19 <div hidden id="question"></div> <!--要素を取得させるだけのため、非表示--> 20 <div hidden id="choices"></div> 21 <div hidden id="setQuiz"></div> 22 <div hidden id="btn"></div> <!--要素を取得させるだけのため、非表示--> 23 24 <script src="js/main.js"></script> 25 </body> 26</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 <button hidden id="sbtn"></button> <!--要素を取得させるだけのため、このボタンは非表示--> 25 26 <script src="js/main.js"></script> 27</body> 28</html>
javascript
1 2'use strict'; 3 4{ 5 const question = document.getElementById('question'); 6 const choices = document.getElementById('choices'); 7 const btn = document.getElementById('btn'); 8 const result = document.getElementById('result'); 9 const scoreLabel = document.querySelector('#result > p'); 10 const timer = document.getElementById('timer'); //1 11 const sbtn = document.getElementById('sbtn'); //2 12 13 let startTime; //STARTボタンを押したときの時刻(宣言) 14 let timeLeft; //残り時間 15 const timeToCountDown = 4 * 1000; //1000 = 1秒 16 17 /*constは初期化が必要 const X = 数値、もしくは初期化しない場合は let x; */ 18 19 function updateTimer(t) { //ミリ秒を渡すと、分や秒に直す。t でミリ秒を渡す。 20 const d = new Date(t); //渡されたtで、Dateオブジェクトを作る。 21 const m = d.getMinutes(); //このDateオブジェクトから「分や秒」を取り出す。 22 const s = d.getSeconds(); 23 const ms = d.getMilliseconds(); 24 timer.textContent = m + ':' + s + '.' + ms; //timerの中身を書き換え。 25 } 26 27 document.addEventListener('DOMContentLoaded', function() { 28 startTime = Date.now(); 29 countDown(); 30 }); 31 32 function countDown() { // countDownの宣言 33 setTimeout (function() { // 次の処理を指定したミリ秒後に実行(1度だけ) 34 // const elapsedTime = Date.now() - startTime; 経過時間 = 現在時刻 - スタートした時間 35 // timeLeft = timeToCountDown - elapsedTime; 残り時間 = カウントダウン時間 - 経過時間 36 timeLeft = timeToCountDown - (Date.now() - startTime); 37 //elapsedTimeは、1度しか使わないので直接代入した↑ 38 updateTimer(timeLeft); // 呼び出し(渡 39 } 40 41 sbtn.addEventListener('click', function() { //STARTボタンがクリックされたらタイマーON 42 startTime = Date.now(); // 押したときの時刻を取得 43 countDown(); /* カウントダウン機能は setTimeoutを使い再帰的に実行させるため countDown() という名前の別関数にする。*/ 44 }); 45 46
試したこと
エラー文を検索してコードが間違っていないか確認してみましたが、解決することができませんでした。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答2件
0
ベストアンサー
最初のHTMLにはid="timer"が存在しません。
同じjs読み込んでいるならtimer.textContentがあるupdateTimer(timeLeft)はDOMContentLoadedで実行されているので、必ず読みに行きます。
最初のHTMLでも何かしらJavaScript実行されたいのでしたら、2つ目のHTML用に別のjsにされては。
投稿2020/06/23 21:23
総合スコア80842
0
timer.textContent = m + ':' + s + '.' + ms; //timerの中身を書き換え。
timer になにが入っているかみてみればどうでしょう
投稿2020/06/23 15:33
総合スコア87747
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/06/24 04:11