JavaScript addEventListener绑定的日历下月按钮仅首次点击生效问题

问题根因 #

• 你在页面初始化阶段就通过querySelectorAll获取了.day和.removercalendar类的元素存在new_date和new_day变量里，这两个变量存的是初始渲染的静态节点列表，后续调用drawcalendar新渲染出来的日历节点不会自动更新到这两个变量里。
• 第一次点击下月按钮时，删除的是初始的旧节点，操作有效；但第二次及之后点击时，你遍历的还是已经被删除的旧节点列表，没有删除新渲染出来的日历内容，所以看起来点击没有反应。

修复方案 #

你只需要把获取节点列表的逻辑挪到点击事件的回调函数内部，每次点击时都重新获取当前页面存在的日历节点再删除即可，修正后的点击事件代码如下：

document.querySelector('#month_next').addEventListener('click', () => {
    // 每次点击都重新获取当前存在的日历节点
    let new_date = document.querySelectorAll('.day');
    let new_day = document.querySelectorAll('.removercalendar');
    for (let k = 0; k < new_date.length; k++){
        new_date[k].parentNode.removeChild(new_date[k]);
    }
    for (let k = 0; k < new_day.length; k++){
        new_day[k].parentNode.removeChild(new_day[k]);
    }
    m++;
    drawcalendar();
})

额外优化建议 #

• 可以在每次重绘日历前直接清空表格的内容，不需要遍历删除节点，操作更简洁：每次调用drawcalendar前执行table.innerHTML = ''即可（注意保留表头结构，如果你现在的table变量包含表头的话，可以单独把放日期的tbody选出来清空）。
• 注意current_day变量只有在当前月份等于系统当前月时才会定义，其他月份访问会出现未定义报错，可以给它加个默认值let current_day = null，避免非当前月的样式判断报错。

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