Событие Onclick в календаре html

Question

Я делал простой планировщик, используя html, css и js. Я не создавал таблицы с использованием тегов таблицы в html, но я создал таблицу с использованием тегов div и css. Теперь я хочу добавить и onclick функцию на одну из ячеек, которые появляются на столе. Может ли кто-нибудь помочь заставить эту функцию вызывать каждый раз, когда я пытаюсь, ячейка внезапно исчезает после повторного вызова sh. Вот исходный код календаря, который я сделал.

<div id="calendar">
        <ul class="weekdays">
            <div id="course">BIT</div>
            <li>Time</li>
            <li>Sunday</li>
            <li>Monday</li>
            <li>Tuesday</li>
            <li>Wednesday</li>
            <li>Thursday</li>
            <li>Friday</li>
            <li>Saturday</li>

        </ul>
        <ul class="days">
            <li class="day other-month">
                <div class="date">8AM</div>
            </li>
            <li class="day other-month">
                <div class="date"></div>
                <div class="event">
                    <div class="event-desc">

                    </div>
                    <div class="event-time">

                    </div>
                </div>
            </li>
            <li class="day other-month">
                <div class="date"></div>
            </li>
            <li class="day other-month">
                <div class="date"></div>
            </li>
            <li class="day other-month">
                <div class="date"></div>
            </li>
            <li class="day">
                <div class="date"></div>
            </li>

            <li class="day">
                <div class="date"></div>
            </li>
            <li class="day">
                <div class="date"></div>
                <div class="event">
                    <div class="event-desc">

                    </div>
                    <div class="event-time">

                    </div>
                </div>
            </li>
        </ul>

        <ul class="days">
            <li class="day">
                <div class="date">9AM</div>
            </li>
            <li class="day">
                <div class="date"></div>
            </li>
            <li class="day">
                <div class="date"></div>
            </li>
            <li class="day">
                <div class="date"></div>
                <div class="event">
                    <div class="event-desc">

                    </div>
                    <div class="event-time">

                    </div>
                </div>
            </li>
            <li class="day">
                <div class="date"></div>

            </li>
            <li class="day">
                <div class="date"></div>
            </li>
            <li class="day">
                <div class="date"></div>
            </li>
            <li class="day">
                <div class="date"></div>
            </li>
        </ul>

        <ul class="days">
            <li class="day">
                <div class="date">10AM</div>
            </li>
            <li class="day">
                <div class="date"></div>
                <div class="event">
                    <div class="event-desc">

                    </div>
                    <div class="event-time">

                    </div>
                </div>

            </li>
            <li class="day">
                <div class="date"></div>
            </li>
            <li class="day">
                <div class="date"></div>
            </li>
            <li class="day">
                <div class="date"></div>
            </li>
            <li class="day">
                <div class="date"></div>
            </li>
            <li class="day">
                <div class="date"></div>
                <div class="event">
                    <div class="event-desc">

                    </div>
                    <div class="event-time">

                    </div>
                </div>
                <li class="day">
                <div class="date"></div>
            </li>
            </li>
        </ul>

        <ul class="days">
            <li class="day">
                <div class="date">11AM</div>
            </li>
            <li class="day">
                <div class="date"></div>
            </li>
            <li class="day">
                <div class="date"></div>
                <div class="event">
                    <div class="event-desc">

                    </div>
                    <div class="event-time">

                    </div>
                </div>
            </li>
            <li class="day">
                <div class="date"></div>
            </li>
            <li class="day">
                <div class="date"></div>
            </li>
            <li class="day">
                <div class="date"></div>
            </li>
            <li class="day">
                <div class="date"></div>
            </li>
            <li class="day">
                <div class="date"></div>
            </li>
        </ul>
        <ul class="days">
            <li class="day">
                <div class="date">12PM</div>
            </li>
            <li class="day">
                <div class="date"></div>
                <div class="event">
                    <div class="event-desc">

                    </div>
                    <div class="event-time">

                    </div>
                </div>
            </li>
            <li class="day">
                <div class="date"></div>
            </li>
            <li class="day">
                <div class="date"></div>
            </li>
            <li class="day">
                <div class="date"></div>
            </li>
            <li class="day">
                <div class="date"></div>
            </li>
            <li class="day">
                <div class="date"></div>
            </li>
            <li class="day">
                <div class="date"></div>
            </li>

        </ul>
        <ul class="days">
            <li class="day">
                <div class="date">1PM</div>
            </li>
            <li class="day">
                <div class="date other-month"></div>
            </li>
            <li class="day other-month">
                <div class="date"></div>
                <div class="event">
                    <div class="event-desc">

                    </div>
                    <div class="event-time">

                    </div>
                </div>
            </li>
            <li class="day other-month">
                <div class="date"></div>
            </li>
            <li class="day other-month">
                <div class="date"></div>
            </li>
            <li class="day other-month">
                <div class="date"></div>
            </li>
            <li class="day other-month">
                <div class="date"></div>
            </li>
            <li class="day">
                <div class="date"></div>
            </li>
        </ul>

        <ul class="days">
            <li class="day">
                <div class="date">2PM</div>
            </li>
            <li class="day">
                <div class="date other-month"></div>
            </li>
            <li class="day other-month">
                <div class="date"></div>
                <div class="event">
                    <div class="event-desc">

                    </div>
                    <div class="event-time">

                    </div>
                </div>
            </li>
            <li class="day other-month">
                <div class="date"></div>
            </li>
            <li class="day other-month">
                <div class="date"></div>
            </li>
            <li class="day other-month">
                <div class="date"></div>
            </li>
            <li class="day other-month">
                <div class="date"></div>
            </li>
            <li class="day">
                <div class="date"></div>
            </li>
        </ul>
        <ul class="days">
            <li class="day">
                <div class="date">3PM</div>
            </li>
            <li class="day">
                <div class="date other-month"></div>
            </li>
            <li class="day other-month">
                <div class="date"></div>
                <div class="event">
                    <div class="event-desc">

                    </div>
                    <div class="event-time">

                    </div>
                </div>
            </li>
            <li class="day other-month">
                <div class="date"></div>
            </li>
            <li class="day other-month">
                <div class="date"></div>
            </li>
            <li class="day other-month">
                <div class="date"></div>
            </li>
            <li class="day other-month">
                <div class="date"></div>
            </li>
            <li class="day">
                <div class="date"></div>
            </li>
        </ul>
        <ul class="days">
            <li class="day">
                <div class="date">4PM</div>
            </li>
            <li class="day">
                <div class="date other-month"></div>
            </li>
            <li class="day other-month">
                <div class="date"></div>
                <div class="event">
                    <div class="event-desc">

                    </div>
                    <div class="event-time">

                    </div>
                </div>
            </li>
            <li class="day other-month">
                <div class="date"></div>
            </li>
            <li class="day other-month">
                <div class="date"></div>
            </li>
            <li class="day other-month">
                <div class="date"></div>
            </li>
            <li class="day other-month">
                <div class="date"></div>
            </li>
            <li class="day">
                <div class="date"></div>
            </li>
        </ul>
        <ul class="days">
            <li class="day">
                <div class="date">5PM</div>
            </li>
            <li class="day">
                <div class="date other-month"></div>
            </li>
            <li class="day other-month">
                <div class="date"></div>
                <div class="event">
                    <div class="event-desc">

                    </div>
                    <div class="event-time">

                    </div>
                </div>
            </li>
            <li class="day other-month">
                <div class="date"></div>
            </li>
            <li class="day other-month">
                <div class="date"></div>
            </li>
            <li class="day other-month">
                <div class="date"></div>
            </li>
            <li class="day other-month">
                <div class="date"></div>
            </li>
            <li class="day">
                <div class="date"></div>
            </li>
        </ul>
      </div>

Answer 1

В этом случае вы можете просто попробовать javascript селектор запросов и прослушиватель событий.

<script>
  document.querySelector(".date").addEventListener("click", function() {
     // Do what you want to be onClick
     console.log("Done..");
  });
</script>