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?
Yes, the functionality would be the same.

Video appears after button clicked.

This video goes through .play2

HTML: 
<button class="playInitial cover spinner" type="button" data-container="play2" data-id="EK3h0IADYrQ">
      <span class="color-circle"></span>
    </button>

These videos 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>
 
Last edited:
Upvote 0 Downvote
This was an attempt at trying to do something, but it didn't do anything.

I am most likely doing it the wrong way, or maybe I almost have it.

JavaScript: 
function findPlayers() {
    const buttons = document.querySelectorAll(".cover");
    const newWrapper = document.querySelector('.wrap2');
    const wrapper = document.querySelector('.wrap1');
    buttons.forEach(function addToPlayers(button) {
      players.push({
        "cover": button,
        "wrapper, newWrapper": wrapper
      });
    });
  }
 
Upvote 0 Downvote
Here was another attempt, it did not work. https://jsfiddle.net/czqdw1ja/

No video appears in .wrap2

JavaScript: 
function findPlayers() {
    const buttons = document.querySelectorAll(".cover");
    const newWrapper = document.querySelector('.wrap2');
    const newContent = newWrapper.innerHTML;
    const wrapper = document.querySelector('.wrap1');
    wrapper.innerHTML = newContent;
    buttons.forEach(function addToPlayers(button) {
      players.push({
        "cover": button,
        "wrapper": wrapper
      });
    });
  }
 
Upvote 0 Downvote
Play Snayk 3+, higher dimensional snake game?
htmlcssjavascript28 said:
Here was another attempt, it did not work. https://jsfiddle.net/czqdw1ja/

No video appears in .wrap2

JavaScript: 
function findPlayers() {
    const buttons = document.querySelectorAll(".cover");
    const newWrapper = document.querySelector('.wrap2');
    const newContent = newWrapper.innerHTML;
    const wrapper = document.querySelector('.wrap1');
    wrapper.innerHTML = newContent;
    buttons.forEach(function addToPlayers(button) {
      players.push({
        "cover": button,
        "wrapper": wrapper
      });
    });
  }
Click to expand...
Can you try my suggestion from this post before you try anything else?

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...
codeforum.org codeforum.org

Once you have done so, open the html file in your browser, and open up the inspector and tab over to the console. Are there any errors being thrown?
 
Upvote 0 Downvote
Antero360 said:
Can you try my suggestion from this post before you try anything else?

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...
codeforum.org codeforum.org

Once you have done so, open the html file in your browser, and open up the inspector and tab over to the console. Are there any errors being thrown?
Click to expand...
No errors.

657567u56.png
 
Upvote 0 Downvote
Play Snayk 3+, higher dimensional snake game?
htmlcssjavascript28 said:
I put it into jsitor, it puts it into the 3 separate files for me. And then I loaded it into my browser.
Click to expand...
no no. I mean actually copy all your html code and save it into a .html file, copy all your css styling rules and save them into a .css file, copy all your js code and save it into a .js file. Please do not rely on jsfiddle or jsitor, or any online editor for this part. Please try my suggestion and screenshot me your console log
 
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