Link or button sets a variable, then calls the script

Question

I have a script that plays a video in a Modal when a thumbnail gets clicked. This only works with the first video mentioned in the html, so I'm trying to use js to grab the particular video whos thumbnail is clicked on.

I have set up a variable in the js called vidcode, and gave it a value of the first video's address (rLdpnu2dDUY) or whatever it's called. I then set up a value 'start' for the link part before, and 'end' for the link part after. Now I have "showVideo = start + vidcode + end" and then innerHTML = showVideo, which works no problems.

So far the injection part works. My problem now is passing the address of the clicked thumbnail into the vidcode variable to play the corresponding video. I have looked on SO, w3, and Google. I have 6 different tries and none work fully.

I can create a link which - Sets the variable, but then does not call the script. - Calls the script but does not pass on the variable. - Click one thumb to set the variable then another thumb to call the script. That one will then work but it's an extra step. At least with this one I know that the variable is being set..

<!--== 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>

Spots are commented out when trying something else

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  = "";

});

};

Expected results: Click a link and have either - set that address to variable 'vidcode', or - set the address gobbledegook to 'vidcode' from here and either have the modal script in a separate js file or at the bottom of the page.

As a code-newbie, I'm proud to have figured it out so far (with previous help from SO), it just frustrates me that I can only get half of this to work at a time :/.

Answer 1

@CTOverton provided what was needed, although everyone else and in Stop/Pause video when Modal is closed (not using $ sign) contributed with everything that they got me to look up as well. @Phoenix1355 actually started me on the right path despite me not posting any code at all, in turn leading me to learn so much in very little about Javascript and HTML.

This has been plaguing me for at least a week (I've lost track of time making this website), researching, getting other setups, trying overly-complicated setups, being told it can only be done by paying for a hosting plan or having to use Wordpress.. And this Console.log output, sooo helpful omg. Thank you everyone who contributed!

Here is the finished code:

<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

Based on your description I think you are looking for something along the lines of the "data attribute". Data attributes are custom attributes you can assign to any DOM element that contain essentially whatever you want.

In you case if you have a page with lots of thumbnails and you want a specific action to happen when you click on a specific thumbnail, your best bet is if you store that unique identifier (the video id, or are you put it vidcode) on the element you are clicking on.

This can be done like this:

<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>

Answer 3

Try passing the vidcode as an parameter for modalviewer function and then use the value.

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>