Q&A
index.html
quiz.html
main.js
の順番ですか？
前提・実現したいこと
javascriptでボタンを押したら画面が切り替わり「カウントダウンタイマーの表示と起動」をさせたいと考えているのですが、ボタンをクリックしてもカウントダウンタイマーが起動しません。
ボタンとタイマーを紐つける？ようなコードを書けばいいのでしょうが、知識不足のため手が止まっています。
よろしくお願いします。
発生している問題・エラーメッセージ
ボタンをクリックしても別画面にあるカウントダウンタイマーが起動しない
該当のソースコード
html
1 2<!DOCTYPE html> 3<html lang="ja"> 4 <head> 5 <meta charset="utf-8"> 6 <title>Quiz</title> 7 <link rel="stylesheet" href="css/styles.css"> 8 </head> 9 <body> 10 <section class="container2"> <!-- スタート画面--> 11 <p>ボタンクリックで時間制限のあるクイズが始まります。</p> 12 <div class="sbtn_move"> 13 <button id="sbtn" type="button" onclick="location.href='quiz.html'">START</button> 14 </div> 15 </section> 16 <section hidden> 17 <div></div> 18 </section> 19 20 <div hidden id="question"></div> <!--要素を取得させるだけのため、非表示--> 21 <div hidden id="choices"></div> 22 <div hidden id="setQuiz"></div> 23 <div hidden id="btn"></div> <!--要素を取得させるだけのため、非表示--> 24 25 <script src="js/main.js"></script> 26 </body> 27</html>
html
1 2<!DOCTYPE html> 3<html lang="ja"> 4<head> 5 <meta charset="utf-8"> 6 <title>Quiz</title> 7 <link rel="stylesheet" href="css/styles.css"> 8</head> 9<body> 10 <section class="container"> <!-- クイズ画面--> 11 <p id="question"></p> <!--問題文,jsで扱いやすいようにidを使う。--> 12 <ul id="choices"> <!--選択肢--> 13 </ul> 14 <div id="btn" class="disabled">Next</div> <!--次の問題に進むボタン,押せない状態のボタン--> 15 16 <section class="container3"> 17 <div id="timer">00:00.000</div> <!--カウントダウンタイマーを表示--> 18 </section> 19 <section id="result" class="hidden"> <!--結果画面,最初はクラスで画面外へ隠す--> 20 <p></p> 21 <a href="index.html">Replay?</a> <!--ページ再読み込みでゲームを最初から始める--> 22 </section> 23 </section> 24 25 <button hidden id="sbtn"></button> <!--要素を取得させるだけのため、このボタンは非表示--> 26 27 <script src="js/main.js"></script> 28</body> 29</html>
javascript
1 2'use strict'; 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 updateTimer(t) { //ミリ秒を渡すと、分や秒に直す。t でミリ秒を渡す。 14 const d = new Date(t); //渡されたtで、Dateオブジェクトを作る。 15 const m = d.getMinutes(); //このDateオブジェクトから「分や秒」を取り出す。 16 const s = d.getSeconds(); 17 const ms = d.getMilliseconds(); 18 timer.textContent = m + ':' + s + '.' + ms; //timerの中身を書き換え。 19 } 20 21 function countDown() { // countDownの宣言 22 setTimeout (function() { // 次の処理を指定したミリ秒後に実行(1度だけ) 23 // const elapsedTime = Date.now() - startTime; 経過時間 = 現在時刻 - スタートした時間 24 // timeLeft = timeToCountDown - elapsedTime; 残り時間 = カウントダウン時間 - 経過時間 25 timeLeft = timeToCountDown - (Date.now() - startTime); 26 //elapsedTimeは、1度しか使わないので直接代入した↑ 27 updateTimer(timeLeft); // 呼び出し(渡すミリ秒はtimerLeft) 28 countDown(); //countDownを再帰的に呼び出したいため、ここで呼ぶ。 29 }, 10); 30 } 31 32 sbtn.addEventListener('click', function() { //STARTボタンがクリックされたらタイマーON 33 startTime = Date.now(); // 押したときの時刻を取得 34 countDown(); /* カウントダウン機能は setTimeoutを使い再帰的に実行させるため countDown() という名前の別関数にする。*/ 35 }); 36
試したこと
検索で調べて出てきたコードを書いて試してはみたのですが、できませんでした。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
ボタンとタイマーを紐つける？ようなコードを書けばいいのでしょうが、知識不足のため手が止まっています。
「javascriptでボタンを押したら画面が切り替わる」動作は成功しています。
あとは「切り替わった画面のロードが完了したらタイマーをスタートさせる」ようにコードを書きましょう。
javascript
1document.addEventListener('DOMContentLoaded', function() { 2 startTime = Date.now(); 3 countDown(); 4});
投稿2020/06/23 09:06
総合スコア4524
あなたの回答
tips
プレビュー
