Блог

Я создаю календарь. Когда пользователь нажимает на элемент «день», я хочу, чтобы они выбирали время выпадающего списка. У меня это работает. Проблема, с которой я сталкиваюсь, заключается в том, что когда выбрано время выпадающего списка, то же самое относится и к родительскому элементу «день». Это создает еще один выпадающий список со временем, когда был выбран первый раз. Как я могу создать оператор if в JavaScript, который ищет только щелчок дочернего элемента, а не родительский?

JavaScript:

 function create_dropdown(day){
        var insertdiv = document.createElement('select');
        insertdiv.className = "times";;
        day.appendChild(insertdiv);
        for(var i=0;i<times_full.length;i  ) {
            insertdiv.options[insertdiv.options.length] = new Option(times_full[i], i);
        }
    }

document.querySelectorAll(".day").forEach(day => {
    day.addEventListener("click", event => {
        event.currentTarget.classList.toggle("selected");
        if(event.currentTarget.classList.contains('selected'))
        {
            day.style.backgroundColor='#B0E0E6';
            create_dropdown(day);
        }
        else
        {
            day.style.backgroundColor='transparent';
        }
    });
});


var times_full = [
  "12:00 AM",
  "1:00 AM",
  "2:00 AM",
  "3:00 AM",
  "4:00 AM",
  "5:00 AM",
  "6:00 AM",
  "7:00 AM",
  "8:00 AM",
  "9:00 AM",
  "10:00 AM",
  "11:00 AM",
  "12:00 PM",
  "1:00 PM",
  "2:00 PM",
  "3:00 PM",
  "4:00 PM",
  "5:00 PM",
  "6:00 PM",
  "7:00 PM",
  "8:00 PM",
  "9:00 PM",
  "10:00 PM",
  "11:00 PM"
];
  

Изображение элементов:

Сохраните ваш текущий код как есть, за исключением добавления if( even.target.parentElement.matches('.day') ) { } внутри слушателя.

( event.target это элемент, который был фактически нажат, тогда currentTarget как это элемент, к которому подключен прослушиватель).

 document.querySelectorAll(".day").forEach( day => {
    day.addEventListener("click", event => {
        if( event.target.parentElement.matches('.day') ) {
            event.currentTarget.classList.toggle("selected");
            // etc
        }