Ссылка или кнопка устанавливает переменную, затем вызывает скрипт

Question

У меня есть скрипт, который воспроизводит видео в модальном режиме при нажатии на миниатюру. Это работает только с первым видео, упомянутым в html, поэтому я пытаюсь использовать js, чтобы получить конкретное видео, на котором нажимают на миниатюру.

Я установил в js переменную vidcode и присвоил ей значение адреса первого видео (rLdpnu2dDUY) или как там оно называется. Затем я установил значение 'start' для части ссылки до и 'end' для части ссылки после. Теперь у меня есть «showVideo = начало + vidcode + конец», а затем innerHTML = showVideo, который работает без проблем.

Пока часть впрыска работает. Теперь моя проблема заключается в передаче адреса кликаемого эскиза в переменную vidcode для воспроизведения соответствующего видео. Я смотрел на SO, W3 и Google. У меня есть 6 разных попыток, и ни одна не работает полностью.

Я могу создать ссылку, которая - Устанавливает переменную, но затем не вызывает скрипт. - Вызывает скрипт, но не передает переменную. - Нажмите один большой палец, чтобы установить переменную, затем другой большой палец, чтобы вызвать сценарий. Тогда это сработает, но это дополнительный шаг. По крайней мере, с этим я знаю, что переменная устанавливается ..

<!--== Standard button but requires var vidcode to be preset in the Modal script ==-->  
       <a href="#" id="button" class="button"><img src="https://img.youtube.com/vi/rLdpnu2dDUY/hqdefault.jpg"></a>

<!--== Add onClick to trigger a mini-script which sets the var vidcode early ==-->
       <a href="#" id="button" class="button" onclick="hDSansxhArU()"></a>
        <script>function hDSansxhArU(){var vidcode = 'hDSansxhArU';}</script>

 <!--== Adding the javascript directly to the link code, yet it does not trigger the Modal script ===-->
       <a href="javascript: var vidcode = 'duBjWlIzpzQ'; modalviewer();"></a>

<!--== Adding the javascript directly to the link code, to trigger a mini-script, to then call the modal ===-->
        <a href="javascript: buttt();"></a>
        <script>function buttt(){var vidcode = 'duBjWlIzpzQ'; modalviewer();}</script>

<!--== Use the video's code as an id, then calling that id immediately and setting it to var vidcode ==-->
        <a href="#" id="hDSansxhArU"></a>
        <script>
        document.getElementById('hDSansxhArU').onclick = function() {
        var vidcode = 'hDSansxhArU';
        modalviewer()
        };
        </script>

Точки закомментированы при попытке чего-то другого

function modalviewer(){ //This function usually isn't here
var start = '<iframe width="840" height="472" src="https://www.youtube.com/embed/';
var end = '" frameborder="0" encrypted-media></iframe>';
//var showVideo = start + vidcode + end;

// This part works fine when vidcode gets a value
document.getElementById("button").addEventListener("click", function() {
    document.querySelector(".theVideo").innerHTML = showVideo;
  document.querySelector(".bg-modal").style.display = "flex";

});
document.querySelector(".bg-modal").addEventListener("click", function() { //.bg-modal to make the surrounding clickable
  document.querySelector(".bg-modal").style.display = "none";
  document.querySelector(".theVideo").innerHTML  = "";

});

};

Ожидаемые результаты: Нажмите на ссылку и получите - установить этот адрес в переменную 'vidcode', или - установить адрес gobbledegook в 'vidcode' отсюда и либо иметь модальный скрипт в отдельном js-файле, либо внизу страницы.

Как новичок в коде, я горжусь тем, что понял это до сих пор (с предыдущей помощью SO), меня просто расстраивает то, что я могу заставить работать только половину этого за раз: /.

Answer 1

@ CTOverton предоставил то, что было нужно, хотя все остальные и в Стоп / Пауза видео, когда Модал закрыт (без знака $) предоставили все, что они заставили меня посмотреть.@ Phoenix1355 фактически заставил меня пойти по правильному пути, несмотря на то, что я вообще не публиковал никакого кода, что, в свою очередь, побудило меня узнать очень мало о Javascript и HTML.

Это мучило меня по крайней мере неделю(Я потерял счет времени на создание этого веб-сайта), исследуя, получая другие настройки, пробуя чрезмерно сложные настройки, будучи сказанным, что это можно сделать, только заплатив за план хостинга или используя Wordpress. И этот Console.logвывод, ооочень полезно о боже мойСпасибо всем, кто внес свой вклад!

Вот готовый код:

<html>
    <head>
            <link href="http://www.jolanxbl.ca/snips/modal.css" rel="stylesheet" />
    </head>
    <body>
<center>
    <br><br><br><br><br>
        <!--List of videos-->
<a href="#" class="thumbnail"><img data-vidcode="rLdpnu2dDUY" src="https://img.youtube.com/vi/rLdpnu2dDUY/hqdefault.jpg" width="200px"></a>
<a href="#" class="thumbnail"><img data-vidcode="hDSansxhArU" src="https://img.youtube.com/vi/hDSansxhArU/hqdefault.jpg" width="200px"></a>
<a href="#" class="thumbnail"><img data-vidcode="duBjWlIzpzQ" src="https://img.youtube.com/vi/duBjWlIzpzQ/hqdefault.jpg" width="200px"></a>

</center>

<!-- Modal Section 1 -->
  <div class="bg-modal">
    <div class="modal-content">
            <div class="close">+</div>
        <div class="theVideo">
      <iframe width="840" height="472" src="https://www.youtube.com/embed/rLdpnu2dDUY" frameborder="0" encrypted-media; picture-in-picture allowfullscreen></iframe>
        </div>
    </div>
  </div>

<script>
let vidcode = 'rLdpnu2dDUY';

// Get all elements with classname 'thumbnail'
let thumbnails = document.getElementsByClassName('thumbnail');

// Loop for every element with class
Array.from(thumbnails).forEach(function(element) {
    element.addEventListener('click', thumbnailClicked);
});

function thumbnailClicked(event) {
    // Event is mouse click event
    // target is the img (as that is what you click on)
    // dataset is the data attributes of img
    vidcode = event.target.dataset.vidcode;
    console.log('vidcode: ', vidcode)

//document.querySelector(".gridContainer").addEventListener("click", function() {
  document.querySelector(".theVideo").innerHTML = '<iframe width="840" height="472" src="https://www.youtube.com/embed/' + vidcode + '" frameborder="0" encrypted-media></iframe>';
document.querySelector(".bg-modal").style.display = "flex";
}

document.querySelector(".bg-modal").addEventListener("click", function() { //.bg-modal to make the surrounding clickable
  document.querySelector(".bg-modal").style.display = "none";
  document.querySelector(".theVideo").innerHTML  = "";

});


</script>

    </body>
</html>

Answer 2

Попробуйте передать vidcode в качестве параметра для функции modalviewer, а затем используйте значение.

function modalviewer(vidcode){
var start = '<iframe width="840" height="472" src="https://www.youtube.com/embed/';
var end = '" frameborder="0" encrypted-media></iframe>';
var showVideo = start + vidcode + end;

  document.querySelector(".theVideo").innerHTML = showVideo;

};

       
       <div class="theVideo"></div>
       <a href="#" id="hDSansxhArU">Click</a>
        <script>
        document.getElementById('hDSansxhArU').onclick = function() {
        var vidcode = 'hDSansxhArU';
        modalviewer(vidcode)
        };
        </script>

Answer 3

Основываясь на вашем описании, я думаю, что вы ищете что-то вроде «атрибута данных».Атрибуты данных - это пользовательские атрибуты, которые вы можете назначить любому элементу DOM, который содержит практически все, что вы хотите.

В том случае, если у вас есть страница с большим количеством миниатюр, и вы хотите, чтобы при нажатии определенного миниатюры выполнялось определенное действие, лучше всего сохранить этот уникальный идентификатор (идентификатор видео илиВы помещаете это vidcode) на элемент, на который Вы щелкаете.

Это можно сделать так:

<body>
<!--List of videos-->
<a href="#" class="thumbnail"><img data-vidcode="rLdpnu2dDUY" src="https://img.youtube.com/vi/rLdpnu2dDUY/hqdefault.jpg"></a>
<a href="#" class="thumbnail"><img data-vidcode="example2" src="img2.jpg"></a>
<a href="#" class="thumbnail"><img data-vidcode="example3" src="img3.jpg"></a>

<script>
let vidcode = 'rLdpnu2dDUY';

// Get all elements with classname 'thumbnail'
let thumbnails = document.getElementsByClassName('thumbnail');

// Loop for every element with class
Array.from(thumbnails).forEach(function(element) {
    element.addEventListener('click', thumbnailClicked);
});

function thumbnailClicked(event) {
    // Event is mouse click event
    // target is the img (as that is what you click on)
    // dataset is the data attributes of img
    vidcode = event.target.dataset.vidcode;
    console.log('vidcode: ', vidcode)
}

</script>
</body>