Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • 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.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

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

H

htmlcssjavascript28

Silver Coder
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
Antero360
htmlcssjavascript28 said:
What can be done to figure out how to fix it?
Click to expand...
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.
Sort by date Sort by votes
Play Snayk 3+, higher dimensional snake game?
How do I fix the problem that is in the code presently?

Where the behavior in the demo code: https://jsfiddle.net/rcdLu2bp/

Should work the same way as the code with 3 buttons that is written differently. https://jsfiddle.net/kja4w5ug/

Where clicking on button #5 that has no playlist given to it, instead plays the video from its data-id=""

To reproduce the issue:

Here is the code with 3 buttons: https://jsfiddle.net/kja4w5ug/

When I click on <button> #3

fgfgfgfff.png

I am shown video from <button> #1

JavaScript: 
0: {
      playerVars: {
        playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
      }
    }, // Button 1

vcccvc.png

Instead this is the video that should be seen. data-id="-Xgi_way56U"

ghghghg.png

HTML: 
<button class="playSingle2 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button>

That is the problem I am trying to fix in the code.

How would the code with 3 buttons be adjusted so that, the correct video plays?
 
Last edited:
Upvote 0 Downvote
Indeed, buttons 1 and 3 play the same video. And what I see is that two of your buttons have the same data-id attribute :

HTML: 
<div class="playButtonContainer with-curtain ">
  <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="-Xgi_way56U"></button>
</div>

Does this not explain why two buttons behave the same ? I had expected them to be 1 and 2, not 1 and 3, but I have no idea how your code works, so anything is possible.
 
Upvote 0 Downvote
cbreemer said:
Indeed, buttons 1 and 3 play the same video. And what I see is that two of your buttons have the same data-id attribute :

HTML: 
<div class="playButtonContainer with-curtain ">
  <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="-Xgi_way56U"></button>
</div>

Does this not explain why two buttons behave the same ? I had expected them to be 1 and 2, not 1 and 3, but I have no idea how your code works, so anything is possible.
Click to expand...

Correct video still doesn't appear when set this way: https://jsfiddle.net/scjg510L/

HTML: 
<div class="playButtonContainer with-curtain ">
  <button class="playSingle0 cover" type="button" data-container="play1"></button>
  <button class="playSingle1 cover" type="button" data-container="play1"></button>
  <button class="playSingle2 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button>
</div>
 
Last edited:
Upvote 0 Downvote
There is this piece:

JavaScript: 
function findPlayers() {
    const allCovers = document.querySelectorAll(".cover");
    const allWrappers = document.querySelectorAll(".wrap");
    allCovers.forEach(function addToPlayers(cover, index) {
      players.push({
        "cover": cover,
        "wrapper": (index < allWrappers.length) ? allWrappers[index] : allWrappers[allWrappers.length - 1]
      });
    });
  }

And there is this piece:
JavaScript: 
//to add the player to all the play buttons
  let totalPlayButtons = document.querySelectorAll('[data-container="play1"]').length;

  //looping over all the play buttons and adding player to that
  for (let i = 0; i < totalPlayButtons; i++) {
    players.add(".playSingle" + i, (playerVarsList[i % (Object.keys(playerVarsList).length)] || {}));
  }

Something would need to be adjusted in there. https://jsfiddle.net/scjg510L/

Looking at the demo code as to how it should work: https://jsfiddle.net/hL28x9kf/

Where in the demo code clicking on <button> #5 that has no playlist given to it, instead plays the video from its data-id=""

JavaScript: 
function findPlayers() {
    const buttons = document.querySelectorAll(".cover");
    const wrapper = document.querySelector(".wrap");
    buttons.forEach(function addToPlayers(button) {
      players.push({
        "cover": button,
        "wrapper": wrapper
      });
    });
  }

JavaScript: 
for (let i = 0; i < 5; i++) {
    players.add(".playSingle" + i, (playerVarsList[i] || {}));
  }
 
Last edited:
Upvote 0 Downvote
If you think the problem is in that code, go and debug it !!! Have you heard about the browser's debugger, allowing you to step through your code and examine variables ?
 
Upvote 0 Downvote
All I know is this.

How do I fix the problem that is in the code presently?

Where the behavior in this demo code: https://jsfiddle.net/awht6u37/

The correct video appears here when clicking on <button> #3.
HTML: 
<div class="playButtonContainer with-curtain ">
  <button class="playSingle0 cover" data-container="play1"></button>
  <button class="playSingle1 cover" data-container="play1"></button>
  <button class="playSingle2 cover" data-container="play1" data-id="-Xgi_way56U"></button>
</div>

JavaScript: 
function findPlayers() {
    const buttons = document.querySelectorAll(".cover");
    const wrapper = document.querySelector(".wrap");
    buttons.forEach(function addToPlayers(button) {
      players.push({
        "cover": button,
        "wrapper": wrapper
      });
    });
  }

JavaScript: 
for (let i = 0; i < 3; i++) {
    players.add(".playSingle" + i, (playerVarsList[i] || {}));
  }

Should work the same way as this code here with 3 buttons that is written differently. https://jsfiddle.net/7xz6gw1b/

JavaScript: 
function findPlayers() {
    const allCovers = document.querySelectorAll(".cover");
    const allWrappers = document.querySelectorAll(".wrap");
    allCovers.forEach(function addToPlayers(cover, index) {
      players.push({
        "cover": cover,
        "wrapper": (index < allWrappers.length) ? allWrappers[index] : allWrappers[allWrappers.length - 1]
      });
    });
  }

JavaScript: 
//to add the player to all the play buttons
  let totalPlayButtons = document.querySelectorAll('[data-container="play1"]').length;

  //looping over all the play buttons and adding player to that
  for (let i = 0; i < totalPlayButtons; i++) {
    players.add(".playSingle" + i, (playerVarsList[i % (Object.keys(playerVarsList).length)] || {}));
  }

Where in the demo code clicking on <button> #3 that has no playlist given to it, instead plays the video from its data-id=""
fgfgfgfff.png

To reproduce the issue:

Here is the code I am working on with 3 buttons: https://jsfiddle.net/7xz6gw1b/

When I click on <button> #3

fgfgfgfff.png

I am shown video from <button> #1
JavaScript: 
0: {
      playerVars: {
        playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
      }
    }, // Button 1

vcccvc.png

Instead this is the video that should be seen. data-id="-Xgi_way56U"

ghghghg.png

HTML: 
<div class="playButtonContainer with-curtain">
  <button class="playSingle0 cover" data-container="play1"></button>
  <button class="playSingle1 cover" data-container="play1"></button>
  <button class="playSingle2 cover" data-container="play1" data-id="-Xgi_way56U"></button>
</div>

That is the problem I am trying to fix in the code I am working on.

How would the code with 3 buttons that I am working on be adjusted so that, the correct video plays? https://jsfiddle.net/7xz6gw1b/
 
Upvote 0 Downvote
Play Snayk 3+, higher dimensional snake game?
Yes, yes... we do know what the problem is by now - you have repeated yourself often enough.
So, have you made any attempt to go about it yourself, instead of continuously repeating your question and ask someone else to sort this out ? Seeing your forum name I would have expected a bit more initiative.
Have you actually tried bringing up the debugger ? Do you know how to work it or not ?
Have you actually examined your code and noticed that this all-important attribute data-id is being used nowhere in the JS or CSS ?
Given this, are you even surprised that you get the video with id 0dgNc5S8cLI (The Jake Savoretti vid which is first in the playlist) and not the video with id -Xgi_way56U ? How could the code know you want the latter, if you don't pass that value along from your HTML ?

"Adjusting" the code is out of the question as long as you don't understand how it works.
 
Upvote 0 Downvote
cbreemer said:
Yes, yes... we do know what the problem is by now - you have repeated yourself often enough.
So, have you made any attempt to go about it yourself, instead of continuously repeating your question and ask someone else to sort this out ? Seeing your forum name I would have expected a bit more initiative.
Have you actually tried bringing up the debugger ? Do you know how to work it or not ?
Have you actually examined your code and noticed that this all-important attribute data-id is being used nowhere in the JS or CSS ?
Given this, are you even surprised that you get the video with id 0dgNc5S8cLI (The Jake Savoretti vid which is first in the playlist) and not the video with id -Xgi_way56U ? How could the code know you want the latter, if you don't pass that value along from your HTML ?

"Adjusting" the code is out of the question as long as you don't understand how it works.
Click to expand...
I am trying to replicate how it works in the demo code, https://jsfiddle.net/awht6u37/

In the demo code it works as it should.

Looking at the above code, I am not sure what would get adjusted in here: https://jsfiddle.net/7xz6gw1b/

I have been changing things around in here but nothing is working.

Most likely because I don't know what I am doing.

JavaScript: 
for (let i = 2; i < totalPlayButtons; i++) {
    players.add(".playSingle" + i, (2[i % (Object.keys(2).length)] || {}));
  }

Is there a way to look at how the demo code is written, to be able to make the appropriate changes in here? https://jsfiddle.net/7xz6gw1b/

or, that will not be enough?
 
Last edited:
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Buy me a coffee.
DataCamp Advertisement
Code Academy Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom