• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript How to add data-id to button, allowing me to remove the 2nd container

Can you help me?

The whole goal or overarching objective here is being able to remove the 2nd container from the code.

My HTML is repetitive. Since I only show one player at a time, I should only have a single container.

I’m already using data-container on each button to figure out which video container I want to play.

Instead I want to have a single video player element/container, and just pass the corresponding data-id directly from the button instead. Where I can then instantiate the video player in the same process to load only the video that is clicked.

<div class="video video-frame">

So for example, I’m using play2 to go find a video container named play2 and doing actions to show that specific container. In that container I have an element that has the data-id of my YouTube video -Xgi_way56U

So instead of creating a playX container for every single video, I want to put -Xgi_way56U on the button instead. When the button is clicked, I want to take that ID and pass it into the video player element to load it on demand.

The idea here would be to attach the id data-id="-Xgi_way56U"

to the button:

<button class="playa2 cover" type="button" data-container="play1"></button>

Which would then become this:

<button class="playa2 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button>

I have been told by multiple people now, I should only be needing 1 container.

They said it is unnecessary duplication where only 1 container is all that should be needed.

The idea here would be to add the data-id="" to the buttons, which should allow me to remove the 2nd container from the code.

I have not been able to figure out how to do this.

How the code works is, after clicking a button a video will appear on the screen, click the X the buttons return to the screen where you can click on the 2nd button and a video will appear on the screen.

Two buttons should be able to run off of one of these, that are inside 1 container, instead of needing multiple containers for each button.

<div class="video video-frame">

Here is the code working with 2 containers: https://jsfiddle.net/7apg90wz/

Code:
<div class="container play1 with-curtain">
  <div class="inner-container curtain ">
    <div class="ratio-keeper">
      <div class="wrap">
        <div class="video video-frame" data-id="-Xgi_way56U"></div>
      </div>
    </div>
    <button class="exit" type="button" title="Exit" aria-label="Close"></button>
  </div>
</div>
<div class="container play2 with-curtain">
  <div class="inner-container curtain">
    <div class="ratio-keeper">
      <div class="wrap">
        <div class="video video-frame" data-id="0dgNc5S8cLI"></div>
      </div>
    </div>
    <button class="exit" type="button" title="Exit" aria-label="Close"></button>
  </div>
</div>

Here is the container with buttons:
Code:
<div class="playButtonContainer with-curtain">
  <button class="playa1 cover" type="button" data-container="play1"></button>
  <button class="playa2 cover" type="button" data-container="play2"></button>
</div>

Removing 1 container I have this now: https://jsfiddle.net/82rxzq7h/

The code is not working now because more stuff is needed to be done.

I don’t know what else is needed to be done, or how to achieve this, of being able to remove the 2nd container from the code.

I have been having a very difficult time trying to figure out how to do this in the code.

Code:
<div class="container play1 with-curtain">
  <div class="inner-container curtain">
    <div class="ratio-keeper">
      <div class="wrap">
        <div class="video video-frame"></div>
      </div>
    </div>
    <button class="exit" type="button" title="Exit" aria-label="Close"></button>
  </div>
</div>

Here is the container with buttons: Where I attached the data-id="" to them.
Code:
<div class="playButtonContainer with-curtain">
  <button class="playa1 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button>
  <button class="playa2 cover" type="button" data-container="play1" data-id="0dgNc5S8cLI"></button>
</div>

I tried to provide as much detail in here as possible in what I am trying to do in the code.

If you may have any questions, or would like to know more information, please ask.
 
Solution
What can be done to figure out how to fix it?
OK I Got it
1669670649074.png

1669670845919.png

Also, sorry for the late reply, been in and out of meetings all for the most part of today. Not gonna lie, as I was going through your code, I found myself a bit confused at times due to the naming conventions you use. Go ahead and make these changes, and clean up the code a little as far as those console logs and those functions you commented out, and you should be good to go!
NOTE: Please try to use better naming conventions.

Antero360

King Coder
Staff Team
Security Analyst
Can you help me?

The whole goal or overarching objective here is being able to remove the 2nd container from the code.

My HTML is repetitive. Since I only show one player at a time, I should only have a single container.

I’m already using data-container on each button to figure out which video container I want to play.

Instead I want to have a single video player element/container, and just pass the corresponding data-id directly from the button instead. Where I can then instantiate the video player in the same process to load only the video that is clicked.

<div class="video video-frame">

So for example, I’m using play2 to go find a video container named play2 and doing actions to show that specific container. In that container I have an element that has the data-id of my YouTube video -Xgi_way56U

So instead of creating a playX container for every single video, I want to put -Xgi_way56U on the button instead. When the button is clicked, I want to take that ID and pass it into the video player element to load it on demand.

The idea here would be to attach the id data-id="-Xgi_way56U"

to the button:

<button class="playa2 cover" type="button" data-container="play1"></button>

Which would then become this:

<button class="playa2 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button>

I have been told by multiple people now, I should only be needing 1 container.

They said it is unnecessary duplication where only 1 container is all that should be needed.

The idea here would be to add the data-id="" to the buttons, which should allow me to remove the 2nd container from the code.

I have not been able to figure out how to do this.

How the code works is, after clicking a button a video will appear on the screen, click the X the buttons return to the screen where you can click on the 2nd button and a video will appear on the screen.

Two buttons should be able to run off of one of these, that are inside 1 container, instead of needing multiple containers for each button.

<div class="video video-frame">

Here is the code working with 2 containers: https://jsfiddle.net/7apg90wz/

Code:
<div class="container play1 with-curtain">
  <div class="inner-container curtain ">
    <div class="ratio-keeper">
      <div class="wrap">
        <div class="video video-frame" data-id="-Xgi_way56U"></div>
      </div>
    </div>
    <button class="exit" type="button" title="Exit" aria-label="Close"></button>
  </div>
</div>
<div class="container play2 with-curtain">
  <div class="inner-container curtain">
    <div class="ratio-keeper">
      <div class="wrap">
        <div class="video video-frame" data-id="0dgNc5S8cLI"></div>
      </div>
    </div>
    <button class="exit" type="button" title="Exit" aria-label="Close"></button>
  </div>
</div>

Here is the container with buttons:
Code:
<div class="playButtonContainer with-curtain">
  <button class="playa1 cover" type="button" data-container="play1"></button>
  <button class="playa2 cover" type="button" data-container="play2"></button>
</div>

Removing 1 container I have this now: https://jsfiddle.net/82rxzq7h/

The code is not working now because more stuff is needed to be done.

I don’t know what else is needed to be done, or how to achieve this, of being able to remove the 2nd container from the code.

I have been having a very difficult time trying to figure out how to do this in the code.

Code:
<div class="container play1 with-curtain">
  <div class="inner-container curtain">
    <div class="ratio-keeper">
      <div class="wrap">
        <div class="video video-frame"></div>
      </div>
    </div>
    <button class="exit" type="button" title="Exit" aria-label="Close"></button>
  </div>
</div>

Here is the container with buttons: Where I attached the data-id="" to them.
Code:
<div class="playButtonContainer with-curtain">
  <button class="playa1 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button>
  <button class="playa2 cover" type="button" data-container="play1" data-id="0dgNc5S8cLI"></button>
</div>

I tried to provide as much detail in here as possible in what I am trying to do in the code.

If you may have any questions, or would like to know more information, please ask.

Hi there, what you could do is the following:
HTML:
<div class="container play1 with-curtain">
  <div class="inner-container curtain">
    <div class="ratio-keeper">
      <div class="wrap">
        <div class="video video-frame data-id"></div>
      </div>
    </div>
    <button class="exit" type="button" title="Exit" aria-label="Close"></button>
  </div>
</div>


<div class="playButtonContainer with-curtain">
  <button class="playa1 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button>
  <button class="playa2 cover" type="button" data-container="play1" data-id="0dgNc5S8cLI"></button>
</div>

All you need to do is set up your button onclick so that when .playa1 gets clicked, you give the .container div a class of .play1 and set the data-id attribute of .video to the corresponding id...same logic applies for .playa2
 
Last edited:

Antero360

King Coder
Staff Team
Security Analyst
Could you show me how that would be written into the code please?
JavaScript:
var playButtons = document.querySelectorAll('button.cover');

for(var button of playButtons){
    button.addEventListener('click', function(){
        //get the video container
        //var videoContainer = document.querySelector('')
        
        videoContainer.setAttribute('data-id', button.getAttribute('data-id'))
    });
}
 
This is what I have now: https://jsfiddle.net/eb7xj6kp/

How do I have a video appear on the screen after clicking a button?

Unless I set this up the wrong way.

JavaScript:
function manageButtonCover() {

    var playButtons = document.querySelectorAll('button.cover');

    for (var button of playButtons) {
      button.addEventListener('click', function() {
        var videoContainer = document.querySelector('.video');
        videoContainer.setAttribute('data-id', button.getAttribute('data-id'))
      });
    }
  }
 

Antero360

King Coder
Staff Team
Security Analyst
This is what I have now: https://jsfiddle.net/eb7xj6kp/

How do I have a video appear on the screen after clicking a button?

Unless I set this up the wrong way.

JavaScript:
function manageButtonCover() {

    var playButtons = document.querySelectorAll('button.cover');

    for (var button of playButtons) {
      button.addEventListener('click', function() {
        var videoContainer = document.querySelector('.video');
        videoContainer.setAttribute('data-id', button.getAttribute('data-id'))
      });
    }
  }
you really don't need to wrap that code in a function now. It works just fine. The only error I noticed was that you are not getting anything for video 2
 
When clicking the 1st button, a video is appearing on the screen, when clicking the 2nd button, no video is appearing on the screen?

How come, and how would that be fixed?

Both those data-id's go to video links.

https://jsfiddle.net/r3ny1pcm/

<button class="playa1 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button> <button class="playa2 cover" type="button" data-container="play1" data-id="0dgNc5S8cLI"></button>


If I put this one in by itself, the video will show.

<div class="playButtonContainer with-curtain"> <button class="playa1 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button> </div>

If I put this one in by itself, the video will show.

<div class="playButtonContainer with-curtain"> <button class="playa2 cover" type="button" data-container="play1" data-id="0dgNc5S8cLI"></button> </div>

But when they are together, for some reason both videos are not appearing.

<div class="playButtonContainer with-curtain"> <button class="playa1 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button> <button class="playa2 cover" type="button" data-container="play1" data-id="0dgNc5S8cLI"></button> </div>
 
Last edited:

Antero360

King Coder
Staff Team
Security Analyst
When clicking the 1st button, a video is appearing on the screen, when clicking the 2nd button, no video is appearing on the screen?

How come, and how would that be fixed?

Both those data-id's go to video links.

https://jsfiddle.net/r3ny1pcm/

<button class="playa1 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button> <button class="playa2 cover" type="button" data-container="play1" data-id="0dgNc5S8cLI"></button>


If I put this one in by itself, the video will show.

<div class="playButtonContainer with-curtain"> <button class="playa1 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button> </div>

If I put this one in by itself, the video will show.

<div class="playButtonContainer with-curtain"> <button class="playa2 cover" type="button" data-container="play1" data-id="0dgNc5S8cLI"></button> </div>
according to jsfiddle...you have a null reference somewhere where you reference classList. Go through your code and add a console log to output each item where you use classList
 
It points to line 279.

jsitor is good at telling you what line the errors are on. https://jsitor.com/7o1dzmVCAu

Uncaught TypeError: Cannot read properties of undefined (reading 'classList') at line 279 col 8

This line: el.classList.remove("hide");

Is there something that would be done in the code that would fix this, allowing for the 2nd button to be able to produce a video?

JavaScript:
const playerVars = {
      autoplay: 0,
      controls: 1,
      disablekb: 1,
      enablejsapi: 1,
      fs: 0,
      iv_load_policy: 3
    };
    const defaults = {
      height: 360,
      host: "https://www.youtube-nocookie.com",
      playerVars,
      width: 640
    };

    function show(el) {
      el.classList.remove("hide");
    }
 
Last edited:

Antero360

King Coder
Staff Team
Security Analyst
It points to line 279.

jsitor is good at telling you what line the errors are on. https://jsitor.com/7o1dzmVCAu

This line: el.classList.remove("hide");

Is there something that would be done in the code that would fix this, allowing for the 2nd button to be able to produce a video?

const playerVars = { autoplay: 0, controls: 1, disablekb: 1, enablejsapi: 1, fs: 0, iv_load_policy: 3 }; const defaults = { height: 360, host: "https://www.youtube-nocookie.com", playerVars, width: 640 }; function show(el) { el.classList.remove("hide"); }
so let's take a step back. So the error is 'undefined at classList'...this means that either a) whatever 'el' is, doesn't have a list of classes, or b) 'el' is null, this is where you need to step through your code and see what exactly is being passed to the function show, and where...and determine where the null is coming from
 

Antero360

King Coder
Staff Team
Security Analyst

Antero360

King Coder
Staff Team
Security Analyst
I did that here and in console log a whole bunch of stuff comes up when the 1st button is clicked: https://jsitor.com/7o1dzmVCAu

Should I be looking for something inside there particular?

JavaScript:
function show(el) {
    el.classList.remove("hide");
    console.log("el");
  }
Ok, so where in your code do you use the function show()... try moving the console.log call there and printing out what you are passing into show
 
In here:

JavaScript:
const manageCover = (function makeManageCover() {
  const config = {};
  const body = document.body;
  let currentPlayButton = {};

  function show(el) {
    el.classList.remove("hide");
    console.log(el);
  }
 
Top