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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Q&A

解決済

2回答

1585閲覧

jsでタイマーを作っているのですが、正常に動きません

sushi723

総合スコア17

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

0グッド

0クリップ

投稿2017/09/24 12:28

編集2017/09/24 13:27

consoleでh,m,sの値を出そうとするとundefinedと出てきて
timerStringをconsoleで出力すると出はするのですが、hの値が何故か9
担っていて困っています。
回答お願いします。

html

1<div "timer">00:00:00</div> 2<div id = "wrapper"> 3 <div id = "hour">hour</div> 4 <div id = "min">min</div> 5 <div id = "sec">sec</div> 6 <div id = "start">start</div> 7</div> 8

javascript

1let timer = document.getElementById("timer"); 2let hour = document.getElementById("hour"); 3let sec = document.getElementById("sec"); 4let min = document.getElementById("min"); 5let isRunning = false; 6 7let leftTimer; 8let primaryTimer = 4 * 1000; 9let theTime = Date.now(); 10let h,m,s; 11 12function countdownTimer(t){ 13 14 let d = new Date(t); 15 h = d.getHours(); 16 m = d.getMinutes(); 17 s = d.getSeconds(); 18 19 h = ("00" + h).slice(-2); 20 m = ("00" + m).slice(-2); 21 s = ("00" + s).slice(-2); 22 23 let timerString = h + ":" + m + ":" + s; 24 console.log(timerString); 25 timer.innerHTML = timerString; 26} 27 28function updateTimer(){ 29 let timerId = setTimeout(function(){ 30 leftTimer = primaryTimer - (Date.now() - theTime); 31 if(leftTimer < 0)clearTimeout(timerId); 32 countdownTimer(leftTimer); 33 updateTimer(); 34 },1000); 35 36 37} 38updateTimer(); 39 40 41

consoleでh,m,sの値を出そうとするとundefinedと出てきて
timerStringをconsoleで出力すると出はするのですが、hの値が何故か9
担っていて困っています。
回答お願いします。

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

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

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

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

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

kei344

2017/09/24 13:18

提示のコードではupdateTimerが一度も実行されません。転記漏れはありませんか?
sushi723

2017/09/24 13:25

すみません、コピペミスでした。もとのコードには最後の方にupdateTimer();があります。
guest

回答2

0

コードはこれですべてなのでしょうか?
hourなどの変数を使っていないようです。
また、その位置でgetElementByIdしても、bodyが読み込まれていなければ取得できない気がします。

コードからやりたいことがよく汲み取れなかったのですが、とりあえず、
new Date()の引数に数値を入れた場合、それは1970年1月1日0時0分0秒(世界標準時)からの経過ミリ秒です。
この値がどうなっているか、確認してください。
hが9なのは、JSTとUSTがずれているためだと思います。

投稿2017/09/24 13:30

moredeep

総合スコア1507

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

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

sushi723

2017/09/24 13:36

すみません。このコード自体はまだ未完成です。 とりあえずカウントダウンする機能だけを実装しようとしていました。 なのでhour,minなどの変数はこのあと使うつもりです。 let d = new Date(t)このようにしていてdの値を出そうとしたのですが、未定義とされてしまい、値を確認することができませんでした 情報不足で本当に申し訳ないのですが、これはコードペン
guest

0

ベストアンサー

とりあえず動かすと提示のものと違うエラーが出ます。

Error

1TypeError: timer is null

で、それを修正したら動いているように見えます。

HTML

1<!-- 2<div "timer">00:00:00</div> 3 ↓ --> 4<div id="timer">00:00:00</div> 5```**動くサンプル:**[https://jsfiddle.net/z3a33n48/](https://jsfiddle.net/z3a33n48/) 6 7 8 9--- 10 11**追記:** 12 13moredeepさんの指摘の通り、script要素の位置に問題がある可能性もありますね。 14 15【DOMContentLoaded - Web 技術のリファレンス | MDN】 16[https://developer.mozilla.org/ja/docs/Web/Reference/Events/DOMContentLoaded](https://developer.mozilla.org/ja/docs/Web/Reference/Events/DOMContentLoaded) 17 18【DOMContentLoadedイベントとloadイベントの違い[タイミング][JavaScript]】 19[http://noumenon-th.net/programming/2017/06/11/domcontentloaded/](http://noumenon-th.net/programming/2017/06/11/domcontentloaded/) 20> ```JavaScript 21> document.addEventListener( 'DOMContentLoaded', function(){ 22> //〜処理〜 23> }, false ); 24> ```

投稿2017/09/24 13:31

編集2017/09/24 13:37
kei344

総合スコア69364

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問