JavaScript DOM日历按钮addEventListener失效问题求助

你的按钮点击事件失效，核心原因是使用outerHTML将带事件监听器的DOM元素转为字符串后，重新插入DOM的是全新的无事件元素。具体来说：

• 你在createCalendarHeader里创建了按钮并绑定了点击事件，但在showSkiDetails中，通过headerButtonContainer.outerHTML把这些元素转成了纯HTML字符串，再赋值给fakePopup.innerHTML。这一步会丢弃原DOM节点上的所有事件监听器，插入到页面的是完全新的DOM元素，自然没有点击效果。
• 另外createCalendarHeader里还存在两个隐性问题：使用了未声明的全局变量prevMonthButton/nextMonthButton，以及引用了未定义的calendarContainer参数。

1. 避免使用innerHTML拼接带事件的DOM元素 #

直接将创建好的DOM节点（保留事件监听器）append到弹窗容器中，而不是转成字符串拼接。

2. 修复变量与参数问题 #

• 把全局变量改为局部const声明，避免全局污染。
• 给createCalendarHeader传入calendarContainer参数，解决未定义错误。

修复createCalendarHeader函数

function createCalendarHeader(calendarContainer) { // 添加calendarContainer参数
  const calendarHeader = document.createElement('div');
  calendarHeader.classList.add('calendar-header');

  // Add the month display
  const monthDisplay = document.createElement('div');
  calendarHeader.appendChild(monthDisplay);

  // 改用const声明局部变量，避免全局污染
  const prevMonthButton = document.createElement('button');
  prevMonthButton.innerHTML = '<';
  prevMonthButton.addEventListener('click', () => {
    showPreviousMonth(calendarContainer, monthDisplay); 
    updateCalendar(calendarContainer, monthDisplay);
  });

  calendarHeader.appendChild(prevMonthButton);

  const nextMonthButton = document.createElement('button');
  nextMonthButton.innerHTML = '>';
  nextMonthButton.addEventListener('click', () => {
    showNextMonth(calendarContainer, monthDisplay); 
    updateCalendar(calendarContainer, monthDisplay);
    console.log('Boutons next clicked');
  });
  console.log('Boutons créer');
  calendarHeader.appendChild(nextMonthButton);

  return { calendarHeader, monthDisplay, prevMonthButton, nextMonthButton };
}

修复showSkiDetails函数

function showSkiDetails(skiId) {
  const selectedSki = skiInventory.find((ski) => ski.id === skiId);

  // Create a fake pop-up container
  const fakePopup = document.createElement('div');
  fakePopup.classList.add('fake-popup');

  // Create a calendar container
  const calendarContainer = createCalendarContainer();

  // 创建header时传入calendarContainer参数
  const { calendarHeader, monthDisplay, prevMonthButton, nextMonthButton } = createCalendarHeader(calendarContainer);

  // Append the header to the container
  calendarContainer.appendChild(calendarHeader);

  // Add days to the calendar
  updateCalendar(calendarContainer, monthDisplay);

  // Create a container for the header and buttons
  const headerButtonContainer = document.createElement('div');
  headerButtonContainer.classList.add('header-button-container');

  // Append the buttons and header to the container
  headerButtonContainer.appendChild(prevMonthButton);
  headerButtonContainer.appendChild(monthDisplay);
  headerButtonContainer.appendChild(nextMonthButton);

  // 创建弹窗内容容器，避免innerHTML拼接事件元素
  const popupContent = document.createElement('div');
  popupContent.classList.add('popup-content');
  
  // 添加关闭按钮
  const closeBtn = document.createElement('span');
  closeBtn.classList.add('close');
  closeBtn.innerHTML = '×';
  closeBtn.addEventListener('click', closeFakePopup);
  popupContent.appendChild(closeBtn);

  // 添加滑雪信息
  const title = document.createElement('h2');
  title.textContent = selectedSki.model;
  popupContent.appendChild(title);

  const statusPara = document.createElement('p');
  statusPara.textContent = `Status: ${selectedSki.status}`;
  popupContent.appendChild(statusPara);

  const locationPara = document.createElement('p');
  locationPara.textContent = `Location: ${selectedSki.location}`;
  popupContent.appendChild(locationPara);

  // 添加日历容器
  const calendarWrapper = document.createElement('div');
  calendarWrapper.classList.add('calendar-container');
  calendarWrapper.appendChild(headerButtonContainer);
  calendarWrapper.appendChild(calendarContainer);
  popupContent.appendChild(calendarWrapper);

  // 将内容容器添加到弹窗
  fakePopup.appendChild(popupContent);

  // Append the fake pop-up to the body
  document.body.appendChild(fakePopup);
}

• 避免使用onclick属性绑定事件（比如关闭按钮的onclick="closeFakePopup()"），统一用addEventListener，保持代码一致性。
• updateCalendar函数里每次清空calendarContainer.innerHTML会移除所有子元素，包括calendarHeader，这会导致头部消失。可以把日历的日期部分单独放在一个子容器里，只清空日期部分，保留头部。

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