javascriptでその日の日付に応じたコンテンツだけを表示する

Question

javascriptに関しての非常に初歩的な質問です。

1つのHTMLファイル内に、1年365日分のコンテンツを用意し、日付に応じてその日のコンテンツだけを表示させるようにしたいと思っています。

<div id="0101">
1月1日のコンテンツ
</div>

<div id="0102">
1月2日のコンテンツ
</div>

...日数分続く

var today=new Date(); 
var year = today.getFullYear();
var month = today.getMonth()+1;
var day = today.getDate();
 if (month === 1 && day === 1) {
 var element = document.getElementById('0101');

 element.classList.add('show');}
 if (month === 1 && day === 2) {
 var element = document.getElementById('0102');
 element.classList.add('show');}

...日数分続く

といった具合に記述しています。
あらかじめすべてのコンテンツをCSSで非表示にし、今日の日付に該当するIDだけにshowクラスをつけて表示させている状態です。
このような場合、もっとコードをスマートにする方法はありませんでしょうか。

繰り返し処理などを使用すればいいのかとは思うのですが、
HTMLとCSSが専門でjavascriptにまったく詳しくないため、具体的にどうすればよいのかわかりません…。

あまりに初歩的な質問でお恥ずかしい限りですが、
どなたか具体策をご教授頂けますと幸いです。
どうぞよろしくお願い致します。

Answer 1

月・日が1桁の場合、頭に0をつけて2桁に揃え、それぞれを足してgetElementById()すれば良いと思います。

var today=new Date(); 
var year = today.getFullYear();
var month = ("0"+(today.getMonth() + 1)).slice(-2);
var day = ("0"+today.getDate()).slice(-2);

var element = document.getElementById(month+day);
element.classList.add('show');

例えば今日の日付だとmonthには10, dayには24が入りますので1024のついたIDが取得されます。

Comments

[isobel]

確認が遅くなり申し訳ありません。
こういうやり方もあるのですね、他にも同様の動作をさせたい場所がありますので使わせて頂きます。
本当にありがとうございます！

Answer 2

var element = document.getElementById( new Date().toLocaleDateString('ja',{month:'2-digit', day:'2-digit'}).split('/').join('') );
element.classList.add('show');

Comments

[isobel]

できました！
ものすごく簡略化することができて大変助かりました。
早急なご回答をありがとうございました！