Javascript DOM 中的按钮 addeventlisteners 问题

const skiInventory = [
    { id: 1, model: 'Ski Model 1', status: 'available', location: 'Shop A' },
    { id: 2, model: 'Ski Model 2', status: 'rented', location: 'Customer X' },
    { id: 3, model: 'Ski Model 3', status: 'available', location: 'Shop A' },
   
    // ... add more ski data as needed
];

// Function to render the inventory grid
function renderInventory() {
    const inventoryGrid = document.getElementById('inventory-grid');
    inventoryGrid.innerHTML = ''; 
  // Clear previous content

    skiInventory.forEach(ski => {
        const skiCard = document.createElement('div');
        skiCard.classList.add('ski-card');
        skiCard.innerHTML = `
            <p>${ski.model}</p>
            <p>Status: ${ski.status}</p>
            <button onclick="showSkiDetails(${ski.id})">Details</button>
        `;
        inventoryGrid.appendChild(skiCard);
    });
}



 //Début de la création du calendrier
  let currentMonth = new Date().getMonth();
  let currentYear = new Date().getFullYear();
  
 
  function createCalendarContainer() {
      const calendarContainer = document.createElement('div');
      calendarContainer.classList.add('calendar');
    return calendarContainer;
  }

  function createCalendarHeader() {
        const calendarHeader = document.createElement('div');
        calendarHeader.classList.add('calendar-header');


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

      // Add previous month arrow button
        prevMonthButton = document.createElement('button');
        prevMonthButton.innerHTML = '&lt;';
        prevMonthButton.addEventListener('click', () => {
          showPreviousMonth(calendarContainer, monthDisplay); 
          updateCalendar(calendarContainer, monthDisplay);
       });

    
       calendarHeader.appendChild(prevMonthButton);

        // Add next month arrow button
        nextMonthButton = document.createElement('button');
        nextMonthButton.innerHTML = '&gt;';
        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 };
}


  //Fonction qui fait apparaitre la fênetre avec le calendrier,
  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();

      // Create a calendar header
      const { calendarHeader, monthDisplay, prevMonthButton, nextMonthButton } = createCalendarHeader();

      // 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);

      // Populate the fake pop-up with ski details and calendar
      fakePopup.innerHTML = `
        <div class="popup-content">
          <span class="close" onclick="closeFakePopup()">&times;</span>
          <h2>${selectedSki.model}</h2>
          <p>Status: ${selectedSki.status}</p>
          <p>Location: ${selectedSki.location}</p>
          <div class="calendar-container">${headerButtonContainer.outerHTML}${calendarContainer.outerHTML}</div>
        </div>
      `;

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

  function onCalendarDayClick(day) {
    // Handle the calendar day click event
    console.log('Selected day:', day);
    // You can add your logic here, such as updating the selected date in your application.
  }

  function showPreviousMonth(calendarContainer, monthDisplay) {
    // Show the previous month
    currentMonth -= 1;
    if (currentMonth < 0) {
      currentMonth = 11;
      currentYear -= 1;
    }

    updateCalendar(calendarContainer, monthDisplay);
  }

  function showNextMonth(calendarContainer, monthDisplay) {
    // Show the next month
    currentMonth += 1;
    if (currentMonth > 11) {
      currentMonth = 0;
      currentYear += 1;
    }
    console.log(currentMonth)
    updateCalendar(calendarContainer, monthDisplay);
  }

  function updateCalendar(calendarContainer, monthDisplay) {
  // Update the calendar with the new month and year
  calendarContainer.innerHTML = ''; // Clear the existing calendar
  console.log('update calendar');
  // Add days of the week
  const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
  daysOfWeek.forEach((day) => {
    const dayOfWeek = document.createElement('div');
    dayOfWeek.classList.add('calendar-day', 'header-day');
    dayOfWeek.textContent = day;
    calendarContainer.appendChild(dayOfWeek);
  });

  // Add the month display
  monthDisplay.textContent = `${getMonthName(currentMonth)} ${currentYear}`;

  // Get the first day of the month
  const firstDayOfMonth = new Date(currentYear, currentMonth, 1).getDay();

  // Add days to the calendar
  const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();

  for (let i = 1; i <= daysInMonth + firstDayOfMonth; i++) {
    const calendarDay = document.createElement('div');
    calendarDay.classList.add('calendar-day');

    if (i > firstDayOfMonth) {
      const dayOfMonth = i - firstDayOfMonth;
      calendarDay.textContent = dayOfMonth;
      calendarDay.addEventListener('click', () => onCalendarDayClick(dayOfMonth));
    }

    calendarContainer.appendChild(calendarDay);
  }
}

  function getMonthName(monthIndex) {
    const monthNames = [
      'January', 'February', 'March', 'April',
      'May', 'June', 'July', 'August',
      'September', 'October', 'November', 'December'
    ];
    return monthNames[monthIndex];
  }
// Function to close the fake pop-up
function closeFakePopup() {
    const fakePopup = document.querySelector('.fake-popup');
    fakePopup.parentNode.removeChild(fakePopup);
}

// Function to handle the check-out process
function checkOut(skiId) {
    // Implement logic to update the status of the selected ski to 'rented'
    renderInventory(); // Refresh the inventory grid
}

// Function to handle the check-in process
function checkIn(skiId) {
    // Implement logic to update the status of the selected ski to 'available'
    renderInventory(); // Refresh the inventory grid
}

// Initial rendering of the inventory
renderInventory();

#inventory-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ski-card {
    border: 1px solid #ccc;
    padding: 10px;
    width: 200px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
}

.ski-card p {
    margin: 0; /* Remove default margins for <p> elements */
}

.ski-card button {
    margin-top: auto; /* Push the button to the bottom of the card */
}

.fake-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-content {
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    position: relative;
}

.close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
}
  .calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    text-align: center;
  }

  .calendar-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .calendar-day {
    padding: 5px;
    border: 1px solid #ccc;
    cursor: pointer;
  }

  .calendar-day:hover {
    background-color: #f0f0f0;
  }

<div id="inventory-grid"></div>
<div id="ski-details"></div>