teratail
回答率
85.29%
質問するログイン新規登録
トップJavaScriptに関する質問html内で日付を自動表示するための、JavaScriptの記述方法

Q&A

解決済

2回答

1768閲覧

html内で日付を自動表示するための、JavaScriptの記述方法

j123
j123

総合スコア15

JavaScript

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

0グッド

0クリップ

投稿2020/08/06 09:52

編集2020/08/07 03:43

0

0

html内で日付を自動表示させたく、JavaScriptにて以下のような記述を作り、
一つは年月日+時間、
一つは年月日のみ
を表示させようとしたのですが、
うまく表示されてくれません。。

追記ーーー
うまくいかない＝
一つ目の<p id="NowDate"></p>を書いた場合は表示されるが、
二つ目の<p id="NowDate2"></p>のみを書いた場合は表示されてくれません。

元々はhtml,cssのみで作られているサイトにて表示させたく思っていたのですが、
メモとして残しておきたく、WordPressの投稿内で記述し、
jsファイルの別ファイルに以下の記述をしたのですが、
htmlのサイトも、wpのサイトも同様の動きで
二つ目の<p id="NowDate2"></p>のみを書いた場合、
表示がされてくれません。
ーーー

html<!DOCTYPE
1<html lang="ja">
2
3<head>
4  <meta charset="UTF-8">
5  <title>test</title>
6  <script type="text/javascript" src="/js/jquery.min.js"></script>
7  <script type="text/javascript" src="/js/base.js"></script>
8</head>
9
10<body>
11  <p id="NowDate"></p>
12  <p id="NowDate2"></p>
13</body>
javascript
1$(function () {
2  var now = new Date();
3  var y = now.getFullYear();
4  var m = now.getMonth() + 1;
5  var d = now.getDate();
6  var w = now.getDay();
7  var wd = ['日', '月', '火', '水', '木', '金', '土'];
8  var h = now.getHours();
9  var mi = now.getMinutes();
10  var s = now.getSeconds();
11  target = document.getElementById('NowDate').innerHTML = y + '年' + m + '月' + d + '日';
12  target = document.getElementById('NowDate2').innerHTML = y + '年' + m + '月' + d + '日' + '(' + wd[w] + ')' + h + '時' + mi + '分' + s + '秒';
13});

getElementById
の使い方か何かがが間違っているのでしょうか？

教えていただければ幸いです。

よろしくお願いいたします。

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

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

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

m.ts10806
m.ts10806

2020/08/06 09:58

「うまくいかない」とは何も伝えない表現です。 起きている現象を具体的に記載していてください。まずはエラー確認から。
miyabi_takatsuk
miyabi_pudding

2020/08/06 10:01

超細かいですが、 Java Script は間にスペース入ると、全然違う言語になってしまうのでご注意を・・・。 （JavaScriptと、一綴りです）
j123
j123

2020/08/06 10:02

m.ts10806さん、 失礼しました。。 うまくいかない＝表示がされてくれない状態です。 具体的にはWordPressで作成中の投稿内に表示したく、 jsファイルの別ファイルに上記質問の記述をし、 投稿内にhtmlのpタグでくくり、idで内容（日付）を呼び出したく思っているのですが、 表示がされてくれません。 よろしくお願いいたします。
j123
j123

2020/08/06 10:06

miyabi_takatsukさん ご指摘ありがとうございます。 大変失礼しました。。
m.ts10806
m.ts10806

2020/08/06 10:07

まずはエラー確認から。 ブラウザ開発ツールのコンソールを確認してください。 しかしWordPressですか。JavaScriptじゃなきゃできないですか？ 現在日時の表示くらいならPHPで済むのですけど。
j123
j123

2020/08/06 10:15

m.ts10806さん WPのみであればPHPで簡単にという方法もありだとは思っているのですが、 PHPのないサイトでの修正に必要なため、 勉強がてらJavaScriptで書いて、メモとしてWPの投稿内で残しておこう。 と思って書いていたのですが、うまくいかず。という感じでして。。 エラーはすいません、色々なプラグインのエラーがたくさん混在してる状態ですので、 少々時間がかかりそうです。 わかり次第書かせていただきますね。 引き続きよろしくお願いいたします。
dodox86
dodox86

2020/08/06 11:05

そもそも自動表示の「自動」、つまり表示のタイミングを制御する部分が見当たらないのですが。例えば1秒ごとに定周期なのか、ボタン押したときとか、HTMLが最初に表示されたときとか。HTML全体を示さないと、閲覧者、回答者には分からないと思いますよ。
m.ts10806
m.ts10806

2020/08/06 11:51

>WPのみであればPHPで簡単にという方法もありだとは思っているのですが、 PHPのないサイトでの修正に必要なため、 勉強がてらJavaScriptで書いて、メモとしてWPの投稿内で残しておこう。 と思って書いていたのですが、うまくいかず。という感じでして。。 ちょっと意味が分かりません。下記内容から伝わるのは「WordPressで実現したい」のように思うのですけど。 >具体的にはWordPressで作成中の投稿内に表示したく、 jsファイルの別ファイルに以下の記述をし、 投稿内にhtmlのpタグでくくり、idで内容（日付）を呼び出したく思っているのですが、 表示がされてくれません。 ただ、通常、投稿はHTMLのエスケープ入ってますから、JavaScript動きませんよね。 WYSIWYGエディタ上の話でしょうか？（それでもJavaScript動いたっけか）
Lhankor_Mhy
Lhankor_Mhy

2020/08/07 02:39

ご提示のコードで問題なく動作しました。 なんとなく、DOMが準備される前に実行しているのではないか、思うのですが。 「jsファイルの別ファイルに以下の記述をし」とのことですが、読み込み部分周辺のコードを見てみたいです。
j123
j123

2020/08/07 02:40

dodox86さん、 ＞表示のタイミングを制御する部分が見当たらない ページが表示された時に日時が表示されればよいのですが、 申し訳ないです、制御する部分が必要とは知りませんでした。 プログラミング初心者ですので、 もう少し調べてこの意味と記述方法がわかれば追記したいと思います。 ご指摘ありがとうございます。
dodox86
dodox86

2020/08/07 02:45

> @Lhankor_Mhyさん > なんとなく、DOMが準備される前に実行しているのではないか、思うのですが。 なんとなくですが、質問者さんは<head>内で定義とかしているのかな、と思いました。 本質問でいただいた回答者さんのコードでは<body>タグ内ですね。 関連質問： [scriptタグはなんで通常bodyに書くのか。]https://teratail.com/questions/67208
j123
j123

2020/08/07 02:58

m.ts10806さん ＞ちょっと意味が分かりません。 わかりにくくて申し訳ありません。 記載していた内容の前半部分が消えていました。。再度記載させていただきますね。 WPではなく、htmlのみで作成されている当方が管理しているサイトがあるのですが、 そこで日付の自動更新をしたく思っていました。 そのため、メモとしてWPの投稿内でも残しておこう。 と思いWPの投稿にhtmlの記述を、そしてjsファイルにscriptの記述を書いていたのですが、うまく表示されず。 といった感じです。 ＞ただ、通常、投稿はHTMLのエスケープ入ってますから、JavaScript動きませんよね。 すいません、当方の環境では動くので、もしかしたら何か仕様変更を以前にしたのかもしれません。そこまで把握できてないので、 わかり次第記載させていただきますね。 ご指摘ありがとうございました。
Lhankor_Mhy
Lhankor_Mhy

2020/08/07 03:07

あー、いや、$(function(){})に書かれてるから、それはなさそうでしたね。動的にHTMLが構成されているならともかく。 そうすると、jQuery が読み込まれる前に実行しているとか、その辺かな？
guest

回答2件

0

ベストアンサー

html内で日付を自動表示するための、JavaScriptの記述方法

「時刻計算」と「HTMLへの挿し込み」を分離する例

javascript
1  // 計算
2  var getMyTimeStamp = function ( date ) {
3    if( !date || !date instanceof Date ) {
4      date = new Date();
5    }
6    let 
7      pad = " ", // "0" にすると 01-09 のように詰める(引数で変更しても良い。)
8      wd   = ['日', '月', '火', '水', '木', '金', '土'],
9      w = date.getDay(), // index of wd
10
11      // 備忘録として残すのであれば、演算子で揃えるなどして見易くしておく
12      // (minify すると直してくれるので)
13      Y =  date.getFullYear(),
14      M = (date.getMonth() + 1 + "").padStart(2, pad),
15      D = (date.getDate()      + "").padStart(2, pad),
16      h = (date.getHours()     + "").padStart(2, pad),
17      m = (date.getMinutes()   + "").padStart(2, pad),
18      s = (date.getSeconds()   + "").padStart(2, pad),
19
20      rslt = {
21        date: `${Y}年${M}月${D}日`,
22        time: `${h}時${m}分${s}秒`,
23      }
24    ;
25    rslt.datetime = `${rslt.date}(${wd[w]})${rslt.time}`
26
27    return rslt;
28  }
29
30
31  // 簡単なコードなので Vanilla で。
32  window.addEventListener("DOMContentLoaded", () => {
33    var now = getMyTimeStamp();
34    console.log( now ); // => { date: , time: , datetime: }
35
36    // DOM 操作で HTMLに挿し込み
37    document.getElementById("NowDate").innerHTML = now.date;
38    document.getElementById("NowDate2").textContent = now.datetime;
39  });
40

分離した理由：

  1. ユーザ関数 getMyTimeStamp() の引数に Dateオブジェクトを与えると 別の時刻にも対応できる。
  2. シンプルなDOM操作で挿し込みできる。

getElementByIdの使い方か何かがが間違っているのでしょうか？

  1. 修正前は使うタイミング（DOMContentLoaded）が示されていませんでしたWindow#Events。
  2. HTMLから削除したために、document.getElementById() が null を返すにもかかわらず innerHTML というプロパティを指定したためです。
HTML
1  <!-- p id="NowDate"></p -->
2  <p id="NowDate2"></p>
javascript
1
2  // DOM 操作で HTMLに挿し込み
3  document.getElementById("NowDate").innerHTML = now.date; // Errorで中断
4  // => Uncaught TypeError: Cannot set property 'innerHTML' of null
5  document.getElementById("NowDate2").textContent = now.datetime; // 実行されない
6  // => NowDate2 の表示（HTMLへの挿し込み）もない。

開発者コンソールは コードを変更する毎に確認してください

追記）

参照できない要素がある場合、無視できるようなコードにします。

javascript
1  // ご質問内の target を使う場合
2  target = document.getElementById("NowDate");
3  if( target !== null ) { // null（プリミティブ）はプロパティを持たない
4    target.innerHTML = now.date;
5  }
6  /*
7  if( target = document.getElementById("NowDate") ) {
8    target.innerHTML = now.date;
9  }
10  */
11
12  // null のときに ダミーオブジェクト {} とする例
13  (document.getElementById("NowDate")||{}).innerHTML = now.date;
14// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
15// HTMLDivElement or Object なので、プロパティを指定できる

投稿2020/08/07 04:39

編集2020/08/08 05:34
AkitoshiManabe
AkitoshiManabe

総合スコア5434

j123
j123

2020/08/07 16:55

AkitoshiManabeさん ありがとうございます！ ただ色々試しているのですが、表示がされずでして。。 最初作ったものと比べると少々当方には複雑なので、 どこを修正すればよいかまだわからない状態です。。 とりあえず最初に作ったものが単純すぎるということですよね？ targetは使わなくても問題ない、というより、むしろシンプルにできればよいので、 なしでも問題ないのですが、 >参照できない要素がある場合、無視できるようなコードにします。 ここにヒントがあるのかな？と思い今色々試しているところです。 とりいそぎお礼まで。 ありがとうございます。
AkitoshiManabe
AkitoshiManabe

2020/08/08 05:35

> ここにヒントがあるのかな？ 回答のコード内にコメント追記してみました。
j123
j123

2020/08/09 04:00

AkitoshiManabeさん ありがとうございます！ ただ、こちらの環境が原因なのか、 もしくは当方には少々複雑なので、きちんと修正できていないだけなのかはわからないのですが、 まだきちんと表示できない状態ですので、 とりあえず document.getElementById("NowDate").innerHTML = now.date; document.getElementById("NowDate2").textContent = now.datetime; を使う時、使わない時で、 コメントアウト、アンコメントにて対応しようと思っています。。 そこで最後になのですが、 .innerHTMLと.textContentを使い分けているのはなぜか教えていただけないでしょうか？ .innerHTMLを2つ使うことはできない？のでしょうか？ お手数ですが最後にこれだけ教えていただけないでしょうか？ よろしくお願いいたします。
AkitoshiManabe
AkitoshiManabe

2020/08/09 05:43

> .innerHTMLを2つ使うことはできない？のでしょうか？ innerHTML２つで問題ないです。ただ、ご質問が内容が単純なテキストの事例でしたので、textContent というプロパティでも実装できることを示しました。（ textContent ２つでも意図した結果になります）。
j123
j123

2020/08/09 10:07

AkitoshiManabeさん ありがとうございます！ そういうことなんですね。 色々勉強になるように詰め込んでいただいていた、というわけなんですね。 すごくありがたい回答で感謝感謝です。。 いただいた回答を把握して使えるようになるように 頑張りますね！ ありがとうございました！
guest

0

targetあっても大丈夫でした。すみません。ということはほかの個所に問題があるみたいです。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <title>test</title>
7</head>
8
9<body>
10    <p id="NowDate"></p>
11    <p id="NowDate2"></p>
12    <script>
13        var now = new Date();
14        var y = now.getFullYear();
15        var m = now.getMonth() + 1;
16        var d = now.getDate();
17        var w = now.getDay();
18        var wd = ['日', '月', '火', '水', '木', '金', '土'];
19        var h = now.getHours();
20        var mi = now.getMinutes();
21        var s = now.getSeconds();
22        document.getElementById('NowDate').innerHTML = y + '年' + m + '月' + d + '日';
23        document.getElementById('NowDate2').innerHTML = y + '年' + m + '月' + d + '日' + '(' + wd[w] + ')' + h + '時' + mi + '分' + s + '秒';
24    </script>
25</body>
26
27</html>

投稿2020/08/06 11:04

編集2020/08/07 08:13
Jon_do
Jon_do

総合スコア1373

j123
j123

2020/08/07 02:33

Jon_doさん ありがとうございます！ 実は同じような記述をしていたのですが、 この記述だと、pタグの2つめ <p id="NowDate2"></p> のみにすると表示されず、 <p id="NowDate"></p> <p id="NowDate2"></p> と一つ目から書くと表示されてしまいます。 ですので、targetをつけた状態の方がよいのかな？と思い記載したのですが、 そもそもtargetはいらない感じなのですね。 ありがとうございます！ ちなみにこの書き方で２つ目のみが表示されないのは、 そういう仕様という感じなのでしょうか？
Lhankor_Mhy
Lhankor_Mhy

2020/08/07 02:41

横からすみません。 当方の環境では、ご回答のコードに target = を付け加えても動作しました。 なので、それが原因ではないような気がします。 DOMが準備できていないのが原因のような気がしてます。
j123
j123

2020/08/07 03:35

Lhankor_Mhyさん ありがとうございます！ ということは、targetは関係ない感じなのですね。 ＞DOMが準備できていないのが原因のような気がしてます。 とのことですので、 WPで入れている遅延させるプラグイン等を一旦無効にしてみたのですが、 変わらずでした。。 あとhtmlのみのページでも変わらなかったため、 document.getElementById　の使い方自体が間違えているのかな？ と思い質問した感じなのですが、、、 質問の質が悪く色々と問題を複雑にさせているようで。。 大変恐縮です。。 とりあえず 他にも色々試してみたいと思います。 ありがとうございます！
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.29%

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

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

質問する

関連した質問

トップJavaScriptに関する質問

html内で日付を自動表示するための、JavaScriptの記述方法