• 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.
I need to loop through the items in totalP to select the numbers that are in the array.

Inside the array I need this information:

JavaScript:
playerVars: {
        end: 1800,
        playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g",
        start: 150
      }

Code:
I need to loop through the items in totalP to select the numbers that are in the array.

Which numbers would that be?
 
These: ['0', '3', '5', '7'].forEach
How your code is currently set up, those numbers are not contained in totalP.
JavaScript:
 var totalP = document.querySelectorAll("[data-container=\"play1\"]");
What that snippet of code does, IF you recall from my previous comments explaining it: this code will query the document for all html elements that contain an attribute called "data-container" with a value of "play1", and storing them in a variable called "totalP". Unless the numbers you are looking for are contained somewhere within the button data, your current setup will not work. That is why I asked you why you needed that line of code. Again, @htmlcssjavascript28 I will ask you to read and re-read over my questions and take a few seconds to think about what it is that I am asking you. I encourage you to ask me questions if you do not understand what it is that I am asking you to do.
 
How your code is currently set up, those numbers are not contained in totalP.
JavaScript:
 var totalP = document.querySelectorAll("[data-container=\"play1\"]");
What that snippet of code does, IF you recall from my previous comments explaining it: this code will query the document for all html elements that contain an attribute called "data-container" with a value of "play1", and storing them in a variable called "totalP". Unless the numbers you are looking for are contained somewhere within the button data, your current setup will not work. That is why I asked you why you needed that line of code. Again, @htmlcssjavascript28 I will ask you to read and re-read over my questions and take a few seconds to think about what it is that I am asking you. I encourage you to ask me questions if you do not understand what it is that I am asking you to do.

TotalP is looping through these:

HTML:
<div class="playButtonContainer with-curtain hide">
  <button class="playSingle0 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  <button class="playSingle2 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  <button class="playSingle3 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  <button class="playSingle4 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  <button class="playSingle5 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  <button class="playSingle6 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  <button class="playSingle7 cover" type="button" data-container="play1"></button>
  <button class="playSingle8 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
</div>
 
TotalP is looping through these:

HTML:
<div class="playButtonContainer with-curtain hide">
  <button class="playSingle0 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  <button class="playSingle1 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  <button class="playSingle2 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  <button class="playSingle3 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  <button class="playSingle4 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  <button class="playSingle5 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  <button class="playSingle6 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
  <button class="playSingle7 cover" type="button" data-container="play1"></button>
  <button class="playSingle8 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
</div>
yes, and from here, what data do you need?
 
Without instruction on what to do next in the code, then I am lost and have no idea.

Now I am lost and don't know what I am up to doing in the code. Edit fiddle - JSFiddle - Code Playground

JavaScript:
const totalP = document.querySelectorAll("[data-container=\"play1\"]");

  ['0', '3', '5', '7'].forEach(function callback(value, index) {
    players.add(".playSingle" + index, (playerVarsList[index] || {}));
  });
 
Last edited:
Without instruction on what to do next in the code, then I am lost and have no idea.

Now I am lost and don't know what I am up to in the code. Edit fiddle - JSFiddle - Code Playground


JavaScript:
const totalP = document.querySelectorAll("[data-container=\"play1\"]");


  ['0', '3', '5', '7'].forEach(function callback(value, index) {
    players.add(".playSingle" + index, (playerVarsList[index] || {}));
  });

I am clueless as to what the next steps are.
I have laid out as much of a path for you to start learning and realizing things as I possibly can. As I stated in my messages, I am willing to take you through the debugging process and help you when you need it. What I will not do, is give you straight answers and/or hold your hand and tell you all the steps you need without even attempting them on your own first. I am willing to help you, but you must make the attempt to try it on your own first.
 
How can I attempt steps if I don't know what the steps are?
I tell you what....Next step you should do is go back through the last 10 pages of this thread, read my commentary very carefully. After you have done so, take a very educated guess as to where your next issue is. I will approve or disapprove depending on what you come back with. We can move on from there.
 
Here is the code working: Edit fiddle - JSFiddle - Code Playground

JavaScript:
totalP.forEach(function (_,index) {
        players.add(".playSingle" + index, (playerVarsList[index] || {}));
    });

Here is the code not working: Edit fiddle - JSFiddle - Code Playground

JavaScript:
['0', '3', '5', '7'].forEach(function callback(value, index) {
    players.add(".playSingle" + [index], (playerVarsList[value] || {}));
  });
 
Last edited:
Here is the code working: Edit fiddle - JSFiddle - Code Playground

JavaScript:
totalP.forEach(function (_,index) {
        players.add(".playSingle" + index, (playerVarsList[index] || {}));
    });

Here is the code not working: Edit fiddle - JSFiddle - Code Playground

JavaScript:
['0', '3', '5', '7'].forEach(function callback(value, index) {
    players.add(".playSingle" + [index], (playerVarsList[value] || {}));
  });
So... I took the liberty of doing something YOU SHOULD HAVE BEEN DOING ALL ALONG. LET ME REMIND YOU, I WILL NOT HOLD YOUR HAND AND HELP YOU IF YOU ARE NOT WILLING TO DO IT ON YOUR OWN. I will leave these screenshots here for you to see. I am expecting you to view them, study them, and see the differences between them. Then you attempt to tell me why your code does not work.

These are screenshots of a comparison of both files. On the left, is the file with the code that works, on the right is the file with the code that does not work. LOOK AT THE DIFFERENCES.

1674372219508.png

1674372282239.png

1674372339209.png

1674372378695.png

1674372423521.png


For now, comment this out, and figure out if ALL OF THE ABOVE WORK AS THEY SHOULD. THEN ONCE YOU CONFIRM THAT, LET ME KNOW. UNTIL THEN,
PLEASE DO NOT ASK "WHAT SHOULD I DO NEXT". Let me know once you are done, so we can move back to the screenshot below
1674372857646.png
 
Top Bottom