目次
本記事では、JavaScriptで今年からn年後までの年数を動的に出力する方法をご紹介しています。
JavaScriptで今年から3年後、5年後のような形で年数を動的に出力したいな。良い方法ないかな？
上記の疑問にお答えします。
では、解説していきます。
スポンサーリンク
本記事でやりたいこと
ページにアクセスがあった年を基準とし、n年後までの年数を動的に出力します。アクセスがあった日が2022年9月11日で、今年を含む3年後までの年数を出力する場合、下記のような出力結果となります。
2022 2023 2024
3年後まで出力する必要があるケースはあまりないですが、今年と来年のような年数であれば、商品の予約ページや採用ページで年月日を入力する際に便利かなと思います。
今年からn年後までの年数を動的に出力する
前項の内容をJavaScriptでコーディングします。今年を含む3年後までの年数を動的に出力します。
JavaScript
const date = new Date();
//今年の年数を4桁で取得
const year = date.getFullYear();
//n年後の数値を代入
const end = 3;
for(let i = 0; i < 3; i++){
console.log(year + i);
}
これでn年後までの年数を出力することができました。
スポンサーリンク
セレクトボックスに年数を表示する
コンソールに出力するだけではあまり実用性がないので、例としてセレクトボックスに今年を含む3年後までの年数を出力してみます。
HTML
<select id="year" name="year">
<option value="">----</option>
</select>
JavaScript
//select要素を取得
const select = document.querySelector('#year');
//Dateオブジェクトを取得
const date = new Date();
//今年の年数を取得
const year = date.getFullYear();
//n年後の数値を代入
const end = 3;
for(let i = 0; i < 3; i++){
//option要素生成
let option = document.createElement("option");
//option要素のテキストを設定
option.text = year + i;
//option要素の値を設定
option.value = year + i;
//option要素をselect要素の末尾に追加
select.appendChild(option);
}
実行結果
See the Pen Untitled by ryohei (@intotheprogram) on CodePen.
実行結果を確認すると、セレクトボックスに3年後までの年数が追加されていますね。n年後の年数を増減したい場合は、変数endの値を変更してご利用ください。
最後に
今年から今年を含む何年後かまでの年数を動的に出力する処理が必要になるケースはほとんどありません。私の経験上でも1～2回あったかなくらいのものです。今回はサイト制作の要件にフォーム入力欄のセレクトボックスの年数を動的に表示するというのが含まれていたので、記事にまとめた次第です。同じように年数を動的に表示するページやフォームを制作される場合に参考にしていただければ幸いです。
以上、JavaScriptで今年からn年後までの年数を動的に出力する方法のご紹介でした！
