Вопрос Как это сделать на javascript?

[Евгений87]

<div id="timepicker_hours_1">

<p id="timepicker_hours_sp">22</p>

<p id="timepicker_hours_sp">23</p>

<p id="timepicker_hours_sp">00</p>

</div>



Как распространить событие click на все содержимое timepicker_hours_1?

 

[исма]

const timepickerHours = document.getElementById('timepicker_hours_1');

const timepickerHoursSp = timepickerHours.querySelectorAll('p');

timepickerHoursSp.forEach((element) => {
element.addEventListener('click', () => {
});
});

 

[[email protected]]

Можно использовать метод querySelectorAll() для выбора всех элементов с классом timepicker_hours_sp внутри элемента с идентификатором timepicker_hours_1, а затем использовать метод forEach() для добавления обработчика событий click к каждому элементу.

Пример: const timepickerHours = document.querySelectorAll('#timepicker_hours_1 .timepicker_hours_sp');
timepickerHours.forEach(timepickerHour => {

timepickerHour.addEventListener('click', function(event) {
// Здесь нужно добавить логику для обработки события click
});
});

 

[evgen59]

const timepickerHours = document.getElementById("timepicker_hours_1"
const hoursSp = timepickerHours.querySelectorAll("p#timepicker_hours_sp"

hoursSp.forEach((hour) => {
hour.addEventListener("click", function() {
// Твой код обработчика события
});
});

 

[slavaadm]

const timepicker = document.querySelector('#timepicker_hours_1');

timepicker.addEventListener('click', () => console.log('click')); Вот так вот... ничего более не нужно, ибо в JS действует прямое наследование. Любой вложенный элемент получит событие родителя, если для них не использовать обнуление.

Что конкретно ты хочешь этим добиться, не совсем понятно. Если нужно применить определенное действие на каждый вложенный элемент при клике, то можно использовать nodelist родителя... что-то вроде такого... const timepicker = document.querySelector('#timepicker_hours_1');

timepicker.addEventListener('click', ({target}) => {
target.textContent = '0';
}); При клике по определенному вложенному элементу изменится текст именно внутри этого элемента, остальные останутся нетронутыми.