Как кликнуть по элементу, у которого один Class, но уникальный id?

Question

[Firpso]

Есть одинаковые элементы, но с уникальным id:

<div class="video-player-bar-series-item d-inline-block br-4 mb-0" data-episode="2" data-id="23413" data-episode-type="1" data-episode-title="How to Spend a Long Night" data-episode-released="12 апреля 2021" data-episode-description="" data-player-notvideo="<div class='video-player-online-not'>Нет видео.</div>" role="button">2</div>

<div class="video-player-bar-series-item d-inline-block br-4 mb-0" data-episode="3" data-id="23537" data-episode-type="1" data-episode-title="Beware of Borrowed Plumes" data-episode-released="19 апреля 2021" data-episode-description="" data-player-notvideo="<div class='video-player-online-not'>Нет видео.</div>" role="button">3</div>

В данном случае меня волнует data-episode-type="N"
Как мне кликнуть по data-episode-type="3" через Javascript?

Answer 1

[Dino Winchester]

document.querySelector("[data-episode-type='3']").click();

Comments

[Firpso]

Я вставил ваш пример в консоль и получил следующею ошибку:

VM28198:1 Uncaught TypeError: Cannot read properties of null (reading 'click')
    at <anonymous>:1:50

[Dino Winchester]

Firpso, элемента с таким селектором нет на странице.

[Firpso]

Mizutsune, получилось вот это:

document.querySelector('[data-id="23413"]').click();

Но при обновление страницы, каждый раз этот id будет меняться у каждого элемента, как мне их найти в таком случае?
То есть класс не изменяется, но data_id меняется, можно ли как-то получить все параметры через getElement и как его юзать?Извините что доставляю столько вопросов, просто я с javascript на вы, но в принципе что-то понять могу.

[Firpso]

Mizutsune, есть сайт Animego.org, выбрав любое аниме, например:
Это

Мы увидим плеер, под ним номер эпизода.
Я хочу сделать возможность переключать серии через JavaScript когда текущая серия закончилась.
То есть мне нужно отследить момент когда серия заканчивается и благодаря JavaScript, она автоматически переключает на следующею серию.

Я уже понял, что можно переключать через

document.querySelector('[data-episode="5"]').click();

Где цифра 5, номер серии.
Но как отследить что плеер остановлен, пока что для меня загадка.
Код довольно-таки простенький, просто расширение на TamperMonkey хочу повесить, чтобы сам переключал, когда смотрю.

[Sergei Nazarenko]

Но как отследить что плеер остановлен, пока что для меня загадка.

Firpso,

отслеживать если плеер содержит класс .is-finished

element.classList.contains(class);

[Dino Winchester]

Firpso, если там в качестве плеера используется тег <video>, тогда вы можете повесить на него обработчик и дождаться окончания видео таким образом:

document.querySelector("#player").addEventListener("ended", () => {
   alert("Закончилось видео!")
});

HTMLMediaElement.endedEvent

Альтернативным вариантом будет отслеживание изменений атрибутов, например дата-атрибутов или селекторов по классу.