将今天日期与生日/假期数组进行比较的 JS 函数

Question

我正在尝试创建一个 JS 函数，将今天的日期与生日/假期数组进行比较并将其显示到我的静态网页中，下面是我的代码...有什么建议吗？

我正在尝试使用 innerHTML 将其发布到网页中，但它不起作用，非常感谢您的帮助。

//array of special days
const specialDays = [
  //tech birthdays
  { name: "Sharon Wagner", birthMonth: 1, birthDate: 8 },
  { name: "Lisa Vonhauser", birthMonth: 1, birthDate: 12 },
  { name: "Coleen Druby", birthMonth: 1, birthDate: 27 },
  { name: "Kayla Wilburn", birthMonth: 2, birthDate: 1 },
  { name: "Anita Krivenko", birthMonth: 2, birthDate: 2 },
  { name: "Tracy Schaffer", birthMonth: 2, birthDate: 3 },
  { name: "Casey Wolf", birthMonth: 2, birthDate: 29 },
  { name: "Jane Moyer", birthMonth: 3, birthDate: 12 },
  { name: "Marissa Conti", birthMonth: 3, birthDate: 16 },
  { name: "Nathan Heltebridle", birthMonth: 3, birthDate: 17 },
  { name: "Cheyann Wasssel", birthMonth: 3, birthDate: 17 },
  { name: "Jason Hatter", birthMonth: 4, birthDate: 3 },
  { name: "Barbara Butler", birthMonth: 4, birthDate: 12 },
  { name: "Marge Lopretto", birthMonth: 4, birthDate: 14 },
  { name: "Mary Beth Hellberg", birthMonth: 4, birthDate: 15 },
  { name: "Anne Tonkin", birthMonth: 5, birthDate: 12 },
  { name: "Derek Knisely", birthMonth: 5, birthDate: 13 },
  { name: "Dana Fortney", birthMonth: 5, birthDate: 23 },
  { name: "Brad Mikitko", birthMonth: 5, birthDate: 28 },
  { name: "Chuck Saltern", birthMonth: 6, birthDate: 13 },
  { name: "Bradlee Harvey", birthMonth: 6, birthDate: 13 },
  { name: "Russell DiCristina", birthMonth: 7, birthDate: 5 },
  { name: "David Fortney", birthMonth: 7, birthDate: 6 },
  { name: "Heather Raudenbush", birthMonth: 7, birthDate: 8 },
  { name: "Anngel Rickrode", birthMonth: 7, birthDate: 21 },
  { name: "Amanda Renninger", birthMonth: 7, birthDate: 26 },
  { name: "Heather Pugh", birthMonth: 8, birthDate: 19 },
  { name: "Joan Hartman", birthMonth: 8, birthDate: 31 },
  { name: "Alexis Luna", birthMonth: 9, birthDate: 4 },
  { name: "Jeremy Luong", birthMonth: 9, birthDate: 7 },
  { name: "Lauryn Hench", birthMonth: 9, birthDate: 12 },
  { name: "Dan Flannery", birthMonth: 9, birthDate: 13 },
  { name: "Matt Getz", birthMonth: 9, birthDate: 13 },
  { name: "Lizz Robb", birthMonth: 9, birthDate: 20 },
  { name: "Debbie Lister", birthMonth: 10, birthDate: 2 },
  { name: "Elizabeth Kurtz", birthMonth: 10, birthDate: 2 },
  { name: "Andrew Ebersole", birthMonth: 10, birthDate: 12 },
  { name: "Tricia Burns", birthMonth: 11, birthDate: 6 },
  { name: "Robin Kline", birthMonth: 11, birthDate: 14 },
  { name: "Julie Tobias", birthMonth: 11, birthDate: 20 },
  { name: "Louis Kabamba", birthMonth: 12, birthDate: 7 },
  { name: "Krista Rector", birthMonth: 12, birthDate: 12 },
  { name: "Carly Klinedinst", birthMonth: 12, birthDate: 27 },
  //holidays
  { name: "Happy New Year! ????", holidayMonth: 1, holidayDate: 1 },
  { name: "Happy July 4th! ????", holidayMonth: 7, holidayDate: 4},
  { name: "Merry Xmas! ????", holidayMonth: 12, holidayDate: 25 },
];

//get today's date & month
const today = new Date();
const month = today.getMonth() + 1;
const date = today.getDate();

//function to compare today's date & month to array of birthdays

const birthDays = specialDays.find((it) => it.birthDate === date && it.birthMonth === month);
document.getElementById("birthday").innerHTML = birthDays;


const holidayDates = specialDays.find(it => it.holidayDate === date && it.holidayMonth === month);

Answer 1

我建议您将生日数组与假期数组分开，因为它们是不同的对象。除此之外，如果您希望单个对象与当前日期匹配，请使用 find() 。对于多个对象（即多个具有相同生日的人），使用filter()

//array of special days
const specialBirthDays = [
  { name: "Sharon Wagner", birthMonth: 1, birthDate: 8 },
  { name: "Lisa Vonhauser", birthMonth: 1, birthDate: 12 },
  { name: "Coleen Druby", birthMonth: 1, birthDate: 27 },
  { name: "Kayla Wilburn", birthMonth: 2, birthDate: 1 },
  { name: "Anita Krivenko", birthMonth: 2, birthDate: 2 },
  { name: "Tracy Schaffer", birthMonth: 2, birthDate: 3 },
  { name: "Casey Wolf", birthMonth: 2, birthDate: 29 },
  { name: "Jane Moyer", birthMonth: 3, birthDate: 12 },
  { name: "Marissa Conti", birthMonth: 3, birthDate: 16 },
  { name: "Nathan Heltebridle", birthMonth: 3, birthDate: 17 },
  { name: "Cheyann Wasssel", birthMonth: 3, birthDate: 17 },
  { name: "Jason Hatter", birthMonth: 4, birthDate: 3 },
  { name: "Barbara Butler", birthMonth: 4, birthDate: 12 },
  { name: "Marge Lopretto", birthMonth: 4, birthDate: 14 },
  { name: "Mary Beth Hellberg", birthMonth: 4, birthDate: 15 },
  { name: "Anne Tonkin", birthMonth: 5, birthDate: 12 },
  { name: "Derek Knisely", birthMonth: 5, birthDate: 13 },
  { name: "Dana Fortney", birthMonth: 5, birthDate: 23 },
  { name: "Brad Mikitko", birthMonth: 5, birthDate: 28 },
  { name: "Chuck Saltern", birthMonth: 6, birthDate: 13 },
  { name: "Bradlee Harvey", birthMonth: 6, birthDate: 13 },
  { name: "Russell DiCristina", birthMonth: 7, birthDate: 5 },
  { name: "David Fortney", birthMonth: 7, birthDate: 6 },
  { name: "Heather Raudenbush", birthMonth: 7, birthDate: 8 },
  { name: "Anngel Rickrode", birthMonth: 7, birthDate: 21 },
  { name: "Amanda Renninger", birthMonth: 7, birthDate: 26 },
  { name: "Heather Pugh", birthMonth: 8, birthDate: 19 },
  { name: "Joan Hartman", birthMonth: 8, birthDate: 31 },
  { name: "Alexis Luna", birthMonth: 9, birthDate: 4 },
  { name: "Jeremy Luong", birthMonth: 9, birthDate: 7 },
  { name: "Lauryn Hench", birthMonth: 9, birthDate: 12 },
  { name: "Dan Flannery", birthMonth: 9, birthDate: 13 },
  { name: "Matt Getz", birthMonth: 9, birthDate: 13 },
  { name: "Lizz Robb", birthMonth: 9, birthDate: 20 },
  { name: "Debbie Lister", birthMonth: 10, birthDate: 2 },
  { name: "Elizabeth Kurtz", birthMonth: 10, birthDate: 2 },
  { name: "Andrew Ebersole", birthMonth: 10, birthDate: 12 },
  { name: "Tricia Burns", birthMonth: 11, birthDate: 6 },
  { name: "Robin Kline", birthMonth: 11, birthDate: 14 },
  { name: "Julie Tobias", birthMonth: 11, birthDate: 20 },
  { name: "Louis Kabamba", birthMonth: 12, birthDate: 7 },
  { name: "Krista Rector", birthMonth: 12, birthDate: 12 },
  { name: "Carly Klinedinst", birthMonth: 12, birthDate: 27 }
];

const specialHolidays = [
  { name: "Happy New Year! ?", holidayMonth: 1, holidayDate: 1 },
  { name: "Happy July 4th! ?", holidayMonth: 7, holidayDate: 5},
  { name: "Merry Xmas! ?", holidayMonth: 12, holidayDate: 25 }
]

//get today's date & month
const today = new Date();
const month = today.getMonth() + 1;
const date = today.getDate();

//function to compare today's date & month to array of birthdays

const birthDays = specialBirthDays.filter((it) => it.birthDate === date && it.birthMonth === month);


const holidayDates = specialHolidays.find((holiday)=>holiday.holidayMonth == month && holiday.holidayDate == date)

console.log(birthDays, holidayDates)