Как повесть функцию на все элементы с классом?

Question

[bxspb]

Подскажите как по клику по элементу назначить функцию для всех элементов с выбранным классом на странице.

<button class="uk-button">play</button>

<video class="playVideo"></video>
<video class="playVideo"></video>
<video class="playVideo"></video>

Что то типа этого наверное нужно сделать, я так понимаю что метод клик на SelectorAll не работает, а querySelector возвращает только первый найденный элемент с классом.

var playButton = document.getElementsByClassName("uk-button");
var elements = document.querySelectorAll(".playVideo");
for (var i = 0; i < elements.length; i++) {
  playButton.onclick = function(){
    elements[i].play();
  };
}

});

Comments

[WbICHA]

var playButton = document.getElementsByClassName("uk-button");
                                    ^

Английский знаешь? А теперь ответь, как вот это playButton.onclick может хотя бы теоретически работать?

[WbICHA]

И да, классика жса:

for(var i = 0; i < 10; i++) {
  setTimeout(function() {
    console.log('The number is ' + i);
  }, 0);
}

[bxspb]

WbICHA, че?

[WbICHA]

bxspb, когда прибежишь создавать новый вопрос с тем же самым кодом, что у тебя в вопросе, загляни ещё раз сюда сначала, может дойдёт.

[bxspb]

WbICHA, какую то дичь несешь, видишь же в истории что я скопировала сначала левый код, потом два раза частично правила, все суть поняли, ты один затупил. Может ты попутал с ресурсом, таки умным только на ответах маил ру сидеть.. И зачем мне вообще вникать в пример, я патологоанатом, по этому спрашиваю на тостере, ты прогер, по этому одинокий и унылый, все ровно )

[WbICHA]

bxspb, нифигасе у тебя комплексы. Ну, удачи тебе.

Answer 1

[sergski]

так

Comments

[deantek]

не всегда отрабатывает, при клике на кнопку иногда 2/3 видео только на паузе

[sergski]

deantek, таймлайн в примере у роликов разный, поэтому если один из них закончился (paused), а остальные играют (play), то при нажатии на кнопку будет соответственное статусу поведение

Answer 2

[Alex]

playButton.addEventListener("click", () => elements.forEach(el => el.play()));

В развернутом виде:

playButton.addEventListener("click", function () { // Назначаем обработчик события "клик" по кнопке
   
    elements.forEach(function (el) { // Выполняем какую-то логику для каждого элемента из списка

        el.play()
   })

});