Мой код Js внизу работает правильно для первой ссылки, но не для второй, даже если я обновляю страницу, она работает только для первой ссылки, есть идеи, как решить эту проблему? Спасибо.

{amp}lt;div class="container"{amp}gt; {amp}lt;div class="list"{amp}gt; {amp}lt;li{amp}gt;{amp}lt;a data-video="https://www.youtube.com/embed/PkZNo7MFNFg" href="#"{amp}gt;Vido 1{amp}lt;/a{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;{amp}lt;a data-video="https://www.youtube.com/embed/7bE2mI4ePeU" href="#"{amp}gt;Vido 2{amp}lt;/a{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;br{amp}gt; {amp}lt;br{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="vid"{amp}gt; {amp}lt;iframe id="videos" width="760" height="415" style="background: #ccc;" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen{amp}gt;{amp}lt;/iframe{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;script{amp}gt; let clicked = document.querySelector('a').getAttribute('data-video'); document.querySelector('a').addEventListener('click', () ={amp}gt; { document.querySelector('iframe').src = clicked; }); {amp}lt;/script{amp}gt; 

querySelector()

Метод Document querySelector () возвращает первый элемент в документе, который соответствует указанному селектору или группе селекторов. Если совпадений не найдено, возвращается ноль.

Вам скорее нужен querySelectorAll

Метод Document querySelectorAll () возвращает статический (не действующий) NodeList, представляющий список элементов документа, которые соответствуют указанной группе селекторов.

Этот последний нужен с циклом, также обработчик события должен обрабатывать событие для определения того, что было нажато:

 document.querySelectorAll('a').forEach(item ={amp}gt; item.addEventListener('click', event ={amp}gt; document.querySelector('iframe').src = event.target.getAttribute('data-video') )); 

Демо (он просто отображает текст, так как эти фрагменты сильно загружены здесь)

 document.querySelectorAll('a').forEach(item ={amp}gt; item.addEventListener('click', event ={amp}gt; document.querySelector('.vid').innerText = event.target.getAttribute('data-video') )); 
 {amp}lt;div class="container"{amp}gt; {amp}lt;div class="list"{amp}gt; {amp}lt;li{amp}gt;{amp}lt;a data-video="https://www.youtube.com/embed/PkZNo7MFNFg" href="#"{amp}gt;Vido 1{amp}lt;/a{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;{amp}lt;a data-video="https://www.youtube.com/embed/7bE2mI4ePeU" href="#"{amp}gt;Vido 2{amp}lt;/a{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;br{amp}gt; {amp}lt;br{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="vid"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 

document.querySelector вернет только первый найденный элемент.

То, что вы хотите использовать, это doucment.querySelectorAll() . Это вернет массив всех элементов, которые соответствуют запросу. Вы можете прочитать больше об этом здесь:

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

Вы только добавляете слушателя к первому элементу. Добавьте это ко всем из них:

 document.getElementsByTagName('a').forEach(e ={amp}gt; { let clicked = e.getAttribute('data-video'); e.addEventListener('click', () ={amp}gt; { document.querySelector('iframe').src = clicked; }); }); 

Я думаю, что это может работать:

  {amp}lt;div class="container"{amp}gt; {amp}lt;div class="list"{amp}gt; {amp}lt;li{amp}gt;{amp}lt;a data-video="https://www.youtube.com/embed/PkZNo7MFNFg" href="#"{amp}gt;Vido 1{amp}lt;/a{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;{amp}lt;a data-video="https://www.youtube.com/embed/7bE2mI4ePeU" href="#"{amp}gt;Vido 2{amp}lt;/a{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;br{amp}gt; {amp}lt;br{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="vid"{amp}gt; {amp}lt;iframe id="videos" width="760" height="415" style="background: #ccc;" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen{amp}gt;{amp}lt;/iframe{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;script{amp}gt; let allLinks = document.querySelectorAll('a'); for (let i = 0; i {amp}lt; allLinks.length; i  ) { let link = allLinks[i]; link.addEventListener('click', function () { let clicked = this.getAttribute('data-video'); console.log(`clicked = ${clicked}`); document.querySelector('iframe').src = clicked; }); } {amp}lt;/script{amp}gt; 
Арнаб Банерджи

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,

Прежде всего querySelector возвращает только первый элемент, поэтому нам нужно querySelectorAll чтобы нацелить все элементы. Попробуйте это:

 {amp}lt;div class="container"{amp}gt; {amp}lt;div class="list"{amp}gt; {amp}lt;li{amp}gt;{amp}lt;a data-video="https://www.youtube.com/embed/PkZNo7MFNFg" href="#" {amp}gt;Vido 1{amp}lt;/a{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;{amp}lt;a data-video="https://www.youtube.com/embed/7bE2mI4ePeU" href="#"{amp}gt;Vido 2{amp}lt;/a{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;br{amp}gt; {amp}lt;br{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="vid"{amp}gt; {amp}lt;iframe id="videos" width="760" height="415" style="background: #ccc;" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen{amp}gt;{amp}lt;/iframe{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;script{amp}gt; const vLinks = document.querySelectorAll("a"); for (const vLink of vLinks) { vLink.addEventListener('click', (e) ={amp}gt; { e.preventDefault(); document.querySelector('iframe').src=e.target.dataset.video; console.log(e.target.dataset.video); }) }; {amp}lt;/script{amp}gt; 

Другой подход:

 {amp}lt;div class="container"{amp}gt; {amp}lt;div class="list"{amp}gt; {amp}lt;li{amp}gt;{amp}lt;a data-video="https://www.youtube.com/embed/PkZNo7MFNFg" href="#" {amp}gt;Vido 1{amp}lt;/a{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;{amp}lt;a data-video="https://www.youtube.com/embed/7bE2mI4ePeU" href="#"{amp}gt;Vido 2{amp}lt;/a{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;br{amp}gt; {amp}lt;br{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="vid"{amp}gt; {amp}lt;iframe id="videos" width="760" height="415" style="background: #ccc;" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen{amp}gt;{amp}lt;/iframe{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;script{amp}gt; window.addEventListener('click', (e) ={amp}gt; { //action has been taken if target elements has 'data-video' attribute if(e.target.dataset.video){ e.preventDefault(); document.querySelector('iframe').src=e.target.dataset.video; console.log(e.target.dataset.video); } }) {amp}lt;/script{amp}gt;