如何使用JavaScript为日历中的每一天添加ID？

你之前的问题在于：days是用来拼接HTML的字符串，不是DOM元素，所以直接用days.id完全不会生效；另外Math.random(1,100)是错误用法，Math.random()本身不接受参数，只能返回0到1之间的小数，要生成1-100的整数得写Math.floor(Math.random() * 100) + 1，但随机ID其实不如带具体日期的ID实用——毕竟你要关联localStorage里的事件，用日期当ID能直接对应，不会重复也方便查找。

下面是修改后的代码，给每个日期div添加格式为date-YYYY-MM-DD的唯一ID：

const date = new Date();

const renderCalendar = () =>{
    const monthDays = document.querySelector('.days');
    const calendar = document.querySelector('.calendar')

    let currentYear = date.getFullYear();
    let currentMonth = date.getMonth(); // 月份是0开始（0=1月，11=12月）

    let lastDay = new Date(currentYear, currentMonth + 1, 0).getDate();
    let prevLastDay = new Date(currentYear, currentMonth, 0).getDate();
    
    const firstDayIndex = new Date(currentYear, currentMonth, 1).getDay();
    const lastDayIndex = new Date(currentYear, currentMonth + 1, 0).getDay();
    
    const months = [
        'January', 'February', 'March', 'April', 'May', 'June',
        'July', 'August', 'September', 'October', 'November', 'December'
    ]
    
    document.querySelector('.date h1').innerHTML = months[currentMonth];
    document.querySelector('.date p').innerHTML = date.toDateString();
    
    let days = '';

    // 处理上月剩余日期
    for (let x = firstDayIndex; x > 0; x--){
        let prevMonth = currentMonth - 1;
        let prevYear = currentYear;
        if (prevMonth < 0) {
            prevMonth = 11;
            prevYear -= 1;
        }
        let dayNum = prevLastDay - x + 1;
        // 格式化日期为YYYY-MM-DD，月份和日期补零
        let formattedDate = `${prevYear}-${String(prevMonth + 1).padStart(2, '0')}-${String(dayNum).padStart(2, '0')}`;
        days += `<div class="prev-date" id="date-${formattedDate}">${dayNum}</div>`;
    }
    
    // 处理当月日期
    for (let i = 1; i <= lastDay; i++ ){
        let formattedDate = `${currentYear}-${String(currentMonth + 1).padStart(2, '0')}-${String(i).padStart(2, '0')}`;
        days += `<div id="date-${formattedDate}">${i}</div>`;
    }
    
    // 处理下月前置日期
    for (let j = 1; j < 7 - lastDayIndex; j++){
        let nextMonth = currentMonth + 1;
        let nextYear = currentYear;
        if (nextMonth > 11) {
            nextMonth = 0;
            nextYear += 1;
        }
        let formattedDate = `${nextYear}-${String(nextMonth + 1).padStart(2, '0')}-${String(j).padStart(2, '0')}`;
        days += `<div id="date-${formattedDate}">${j}</div>`;
    }

    monthDays.innerHTML = days;
}

document.querySelector('.calendar').addEventListener('click', (e) =>{
    if (e.target.tagName === 'DIV' && e.target.id) {
        // 解析出日期字符串
        const dateStr = e.target.id.replace('date-', '');
        console.log('点击的日期:', dateStr);
        // 从localStorage获取对应事件
        const events = localStorage.getItem(`events-${dateStr}`);
        if (events) {
            console.log('该日期的事件:', JSON.parse(events));
        }
    }
})

document.querySelector('.prev').addEventListener('click', () =>{
    date.setMonth(date.getMonth() -1);
    renderCalendar();
})
document.querySelector('.next').addEventListener('click', () =>{
    date.setMonth(date.getMonth() +1);
    renderCalendar();
})
renderCalendar();

关键修改点说明： #

• 给每个日期div生成date-YYYY-MM-DD格式的ID，确保每个ID唯一且和日期直接关联
• 处理上月/下月日期时，自动修正年份和月份（比如1月的上月是去年12月，12月的下月是明年1月）
• 点击事件中可通过ID快速提取日期字符串，直接匹配localStorage中的事件数据

内容的提问来源于stack exchange，提问作者Tony