Q&A
実現したいこと
・１日の残り時間を毎秒ごとに表示させること。
前提
・javascriptの勉強中で、setInterval()やsetTimeout()といったメソッドを使って簡単なアプリを作成中
発生している問題・エラーメッセージ
・ブラウザーに表示されない
該当のソースコード
js
1function countDown(){ 2 var now=new Date(); 3 var tomorrow=new Date(now.getFullYear(),now.getMonth(),now.getDate()+1); 4 var differ=tomorrow.getTime()-now.getTime(); 5 6 var sec=Math.floor(differ/1000)%60; 7 var min=Math.floor(differ/1000/60)%60; 8 var hour=Math.floor(differ/1000/60/60); 9 var nokori=hour+":"+min+":"+sec; 10 11 document.getElementsById("htmlNokori").innerHTML=nokori; 12} 13setInterval(countDown,1000);
該当のソースコード
html
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイマー</title> 6</head> 7 8<body> 9 <p id="htmlNokori"></p> 10 <script type="text/javascript" src="test.js"></script> 11</body> 12</html>
試したこと
・下記コードの修正したところ、表示されるようになった。
js
1[修正箇所] 2var nokori=hour+":"+min+":"+sec; 3document.getElementsById("htmlNokori").innerHTML=nokori;
js
1[修正後] 2document.getElementById("hour").textContent=String(hour).padStart(2,"0"); 3document.getElementById("min").textContent=String(min).padStart(2,"0") 4document.getElementById("sec").textContent=String(sec).padStart(2,"0")
html
1[修正後] ※元コードの<p id="htmlNokori"></p>を削除 2<span id="hour"></span>時間 3 <span id="min"></span>分 4 <span id="sec"></span>秒
補足情報（FW/ツールのバージョンなど）
・1-2週間ぐらい勉強したばかりの初心者です。基本となる土台ができていないため、理解していない部分等が多々あります。また、今回こちらにはじめて質問を投稿したため、不慣れな部分が見受けられると思います。
そのため、質問する際の記載方法や勉強方法などアドバイス頂けますと幸いです。よろしくお願いいたします。
回答1件
0
ベストアンサー
単純に
javascript
1document.getElementsById("htmlNokori").innerHTML=nokori; 2↓↓↓ 3document.getElementById("htmlNokori").innerHTML=nokori;
投稿2023/02/08 03:21
総合スコア109848
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2023/02/08 03:30