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
htmlcssjavascript28 said:
It would need to use this because it allows for the 96 buttons to be able to work inside the 1st container:

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

Adding a 2nd container, the above javascript would be modified? https://jsfiddle.net/9rfutgLj/

It would be written a different way?

I don't know how it would be changed though.

HTML: 
<div class="container play2 with-curtain">
  <div class="inner-container curtain curtain2">
    <div class="ratio-keeper">

      <div class="wrap">
        <div class="video video-frame" data-id="-Xgi_way56U"></div>
      </div>
      <div class="panel panel2"></div>
    </div>
    <button class="exit" type="button" title="Exit" aria-label="Close"></button>
  </div>
</div>
Click to expand...
Wait what?! Why do you need 96 buttons for this?!
 
Upvote 0 Downvote
Play Snayk 3+, higher dimensional snake game?
htmlcssjavascript28 said:
What do you mean? jsfiddle? I have been building it on there mostly.
Click to expand...
Listen, best advice ever: you'll be doing yourself a big favor:
if you want to develop it there, go for it...but as you begin your testing phase(s):
save the html in a file, save the css in a file, save the js in a file. Link to your css in the html file, link to your js in the html file. Run that html file locally. This will allow you to set breakpoints in order to debug, and make it 360 times easier to detect where the issues are coming from. Using platforms like jsfiddle, jsitor, and the like are great for fast results, however, they don't provide an easy way to debug due to the fact that your code will instantly be minified
 
Last edited:
Upvote 0 Downvote
I almost have it working.

Basically, in the code I am trying to have .wrap1 and .wrap2 be able to co-exist with each other.

.wrap1 videos goes with <button class="playSingle0 cover" type="button" data-container="play1"

.wrap2 video goes with <button class="playInitial cover spinner" type="button" data-container="play2"


Each container now has its own wrap. .wrap1 .wrap2

In the code I would want .wrap1 and .wrap2 to both be able to show their videos.

If one of them is removed, the other one can't be seen.

Both .wrap1 and .wrap2 would need to be in the code.

How would this be fixed in the code to allow both .wrap1 and .wrap2, when clicked, to be able to show videos?

.wrap1 videos are now viewable. https://jsfiddle.net/tm4fjsr3/

.wrap2 video is now viewable. https://jsfiddle.net/9ce0qda5/

.wrap1 animation removed: much faster to debug https://jsfiddle.net/u5tpwhy9/

.wrap2 animation removed: much faster to debug https://jsfiddle.net/hfmbn2oq/

With the animation removed, clicking the buttons, everything is a lot faster.

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

  function getWrapper(cover) {
    const index = players.findIndex(
      (player) => player.cover === cover
    );
    return players[index].wrapper;
  }

html

HTML: 
   <div class="con1tainer play1 with-curtain">
  <div class="inner-container curtain curtain2">
    <div class="ratio-keeper">

      <div class="wrap1">
        <div class="video video-frame" data-id="-Xgi_way56U"></div>
      </div>
      <div class="panel panel2"></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 curtain2">
    <div class="ratio-keeper">

      <div class="wrap2">
        <div class="video video-frame" data-id="-Xgi_way56U"></div>
      </div>
      <div class="panel panel2"></div>
    </div>
    <button class="exit" type="button" title="Exit" aria-label="Close"></button>
  </div>
</div>

javascript

.wrap2 video is now viewable. https://jsfiddle.net/9ce0qda5/

When this button is clicked
ytytyty.png

ytrtryr.png

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

  function getWrapper(cover) {
    const index = players.findIndex(
      (player) => player.cover === cover
    );
    return players[index].wrapper;
  }

.wrap1 videos are now viewable. https://jsfiddle.net/tm4fjsr3/

.wrap1 videos are shown when the buttons are clicked.

After the red exit button is clicked.

gfhghgfh.png

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

  function getWrapper(cover) {
    const index = players.findIndex(
      (player) => player.cover === cover
    );
    return players[index].wrapper;
  }
 
Last edited:
Upvote 0 Downvote
Play Snayk 3+, higher dimensional snake game?
htmlcssjavascript28 said:
I almost have it working.

Basically, in the code I am trying to have .wrap1 and .wrap2 be able to co-exist with each other.

.wrap1 videos goes with <button class="playSingle0 cover" type="button" data-container="play1"

.wrap2 video goes with <button class="playInitial cover spinner" type="button" data-container="play2"


Each container now has its own wrap. .wrap1 .wrap2

In the code I would want .wrap1 and .wrap2 to both be able to show their videos.

If one of them is removed, the other one can't be seen.

Both .wrap1 and .wrap2 would need to be in the code.

How would this be fixed in the code to allow both .wrap1 and .wrap2, when clicked, to be able to show videos?

.wrap1 videos are now viewable. https://jsfiddle.net/tm4fjsr3/

.wrap2 video is now viewable. https://jsfiddle.net/9ce0qda5/

.wrap1 animation removed: much faster to debug https://jsfiddle.net/u5tpwhy9/

.wrap2 animation removed: much faster to debug https://jsfiddle.net/hfmbn2oq/

With the animation removed, clicking the buttons, everything is a lot faster.

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

  function getWrapper(cover) {
    const index = players.findIndex(
      (player) => player.cover === cover
    );
    return players[index].wrapper;
  }

html

HTML: 
   <div class="con1tainer play1 with-curtain">
  <div class="inner-container curtain curtain2">
    <div class="ratio-keeper">

      <div class="wrap1">
        <div class="video video-frame" data-id="-Xgi_way56U"></div>
      </div>
      <div class="panel panel2"></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 curtain2">
    <div class="ratio-keeper">

      <div class="wrap2">
        <div class="video video-frame" data-id="-Xgi_way56U"></div>
      </div>
      <div class="panel panel2"></div>
    </div>
    <button class="exit" type="button" title="Exit" aria-label="Close"></button>
  </div>
</div>

javascript

.wrap2 video is now viewable. https://jsfiddle.net/9ce0qda5/

When this button is clicked
View attachment 1847

View attachment 1850

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

  function getWrapper(cover) {
    const index = players.findIndex(
      (player) => player.cover === cover
    );
    return players[index].wrapper;
  }

.wrap1 videos are now viewable. https://jsfiddle.net/tm4fjsr3/

.wrap1 videos are shown when the buttons are clicked.

After the red exit button is clicked.

View attachment 1849

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

  function getWrapper(cover) {
    const index = players.findIndex(
      (player) => player.cover === cover
    );
    return players[index].wrapper;
  }
Click to expand...
Not sure what you mean here
1670785057300.png
 
Upvote 0 Downvote
Play Snayk 3+, higher dimensional snake game?
Antero360 said:
ok so what about the second part to that screenshot?
Click to expand...

What do you mean?

How would I be able to have both .wrap1, .wrap2

JavaScript: 
const wrapper = document.querySelector('.wrap1');

JavaScript: 
const wrapper = document.querySelector('.wrap2');

Stated in here?

If that is what the idea would be to try and figure out.

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

  function getWrapper(cover) {
    const index = players.findIndex(
      (player) => player.cover === cover
    );
    return players[index].wrapper;
  }
 
Upvote 0 Downvote
htmlcssjavascript28 said:
What do you mean?

How would I be able to have both .wrap1, .wrap2

JavaScript: 
const wrapper = document.querySelector('.wrap1');

JavaScript: 
const wrapper = document.querySelector('.wrap2');

Stated in here?

If that is what the idea would be to try and figure out.

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

  function getWrapper(cover) {
    const index = players.findIndex(
      (player) => player.cover === cover
    );
    return players[index].wrapper;
  }
Click to expand...
do the videos live in .wrap1, or .wrap2?
 
Upvote 0 Downvote
This one goes through .play2
HTML: 
<button class="playInitial cover spinner" type="button" data-container="play2" data-id="EK3h0IADYrQ">
      <span class="color-circle"></span>
    </button>

These go through .play1

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="M7lc1UVf-VE"></button>
        <button class="playSingle3 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
</div>

HTML: 
   <div class="con1tainer play1 with-curtain">
  <div class="inner-container curtain curtain2">
    <div class="ratio-keeper">

      <div class="wrap1">
        <div class="video video-frame" data-id=""></div>
      </div>
      <div class="panel"></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 curtain2">
    <div class="ratio-keeper">

      <div class="wrap2">
        <div class="video video-frame" data-id="-Xgi_way56U"></div>
      </div>
      <div class="panel panel2"></div>
    </div>
    <button class="exit" type="button" title="Exit" aria-label="Close"></button>
  </div>
</div>
 
Last edited:
Upvote 0 Downvote
Play Snayk 3+, higher dimensional snake game?
htmlcssjavascript28 said:
This one goes through .play2
HTML: 
<button class="playInitial cover spinner" type="button" data-container="play2" data-id="EK3h0IADYrQ">
      <span class="color-circle"></span>
    </button>

These go through .play1

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="M7lc1UVf-VE"></button>
        <button class="playSingle3 cover" type="button" data-container="play1" data-id="M7lc1UVf-VE"></button>
</div>

HTML: 
   <div class="con1tainer play1 with-curtain">
  <div class="inner-container curtain curtain2">
    <div class="ratio-keeper">

      <div class="wrap1">
        <div class="video video-frame" data-id=""></div>
      </div>
      <div class="panel"></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 curtain2">
    <div class="ratio-keeper">

      <div class="wrap2">
        <div class="video video-frame" data-id="-Xgi_way56U"></div>
      </div>
      <div class="panel panel2"></div>
    </div>
    <button class="exit" type="button" title="Exit" aria-label="Close"></button>
  </div>
</div>
Click to expand...
...so remind me again why you are falling back to the 2-container layout? I was under the impression that you had managed to get the 1-container layout working last time
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Buy me a coffee.
Code Academy Advertisement
DataCamp 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