(Sample)
詳細はコメントにしました。
function calculateAge() {
// #birthdayというIDを持つ要素の値(ユーザーが入力した誕生日)を取得
const birthdayInput = document.querySelector('#birthday').value;
// #ageというIDを持つ要素を取得し、ageElementに代入
const ageElement = document.querySelector('#age');
// 誕生日が入力されているかどうかをチェック
if (birthdayInput) {
// 入力された誕生日をDateオブジェクトに変換
const birthday = new Date(birthdayInput);
// 今日の日付をDateオブジェクトとして取得
const today = new Date();
// 今年の年齢を計算(現在の年から誕生年を引く)
let age = today.getFullYear() - birthday.getFullYear();
// 現在の月と誕生月の差を計算
const monthDiff = today.getMonth() - birthday.getMonth();
// 誕生月が現在の月より後、または同じ月で日付がまだ来ていない場合は、年齢を1引く
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthday.getDate())) {
age--;
}
// 計算された年齢をageElementのテキスト内容として設定
ageElement.textContent = age + '歳';
// エラーメッセージの赤字スタイルをリセット(必要な場合のみ)
ageElement.style.color = '';
} else {
// 誕生日が入力されていない場合のエラーメッセージを設定
ageElement.textContent = 'お誕生日を選択して下さい';
// エラーメッセージを赤字で表示
ageElement.style.color = 'red';
}
}