通过JS添加一个元素。我们如何稍后在同一个 js 文件中选择该元素[关闭]

Question

我正在为我的大学项目制作日历。

我使用 js for 循环添加了一些 div :

for (let i = 1; i <= 5; i++) {
    calendarGrid.innerHTML += `<div class= "date-cell today">${i}</div>`;
}

这会将 div 元素（带有 class = date-cell）添加到类（calendarGrid）中，该类也是一个 div 元素

现在我想向此 div（日期单元格）添加一个事件侦听器，以便单击日期单元格时，我的回调函数将运行

现在选择日期单元格类元素：

const prevDateCell = document.querySelectorAll('.date-cell');

prevDateCell 应该给出一个节点列表，其中包含类 date-cell 的所有元素，节点列表的长度应该为 5 但是在控制台 prevDateCell 时，它给出一个 NodeList(0)。

请给出如何选择此 for 循环添加 div 的解决方案以及对此问题的解释 提前致谢

编辑：单击日期单元格时，月份会发生变化，网站上剩余代码显示的日历也会发生变化。

Answer 1

这是活动委托的良好候选者。您无需将单击处理程序添加到元素，而是将其添加到父元素并查看单击的内容。这将允许您定位静态和动态元素。

同样对于 for 循环，您不应该以这种方式使用三元。它很难阅读，而且不是它的意义。

在我的回答中，我已禁用测试，但它会将 isToday 设置为今天或不设置，具体取决于匹配日期值。然后我在日期单元格 div 中使用它。

我的点击处理程序被委托给calendarGrid元素，然后我检查类，如果它匹配，则相应地运行函数。

const calendarGrid = document.querySelector(".calendarGrid");
for (let i = 1; i <= 5; i++) {
   //const isToday = (i == originalDate.getDate() && originalDate.getMonth() == currentDate.getMonth()) ? "today" : "";
   const isToday = "";
   calendarGrid.innerHTML += `<div class= "date-cell ${isToday}">${i}</div>`;
}

calendarGrid.addEventListener("click",(e) => {
  const el = e.target;
  if(el.classList.contains("date-cell")){
    const selNum = el.textContent;
    console.log(selNum)
    /*
        currentDate.setMonth(currentDate.getMonth() - 1);
        console.log("Previous")
        updateCalendar();
    */
   }
});

.date-cell{
  padding:10px;
  display:inline-block;
  background:#d0d0d0;
  margin:10px;
}

<div class="calendarGrid"></div>