Welcome!

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.


    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.
There are 3 console logs in here now: Edit fiddle - JSFiddle - Code Playground

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

I don't understand what I am looking at.
Don't worry about the console logs. Those are just there to help you debug.
 
  • function addPlayer(coverSelector, playerOptions) { const cover = document.querySelector(coverSelector); const wrapper = manageUI.getWrapper(cover); const callback = managePlayer.adder(wrapper, playerOptions); manageCover.addCoverHandler(coverSelector, callback); }
  • { playerVars: { playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g" } }
  • ".playSingle0", undefined
  • function addPlayer(coverSelector, playerOptions) { const cover = document.querySelector(coverSelector); const wrapper = manageUI.getWrapper(cover); const callback = managePlayer.adder(wrapper, playerOptions); manageCover.addCoverHandler(coverSelector, callback); }
  • { videoId: "0dgNc5S8cLI" }
  • ".playSingle1", undefined
  • function addPlayer(coverSelector, playerOptions) { const cover = document.querySelector(coverSelector); const wrapper = manageUI.getWrapper(cover); const callback = managePlayer.adder(wrapper, playerOptions); manageCover.addCoverHandler(coverSelector, callback); }
  • { playerVars: { list: "PLYeOyMz9C9kYmnPHfw5-ItOxYBiMG4amq", listType: "playlist" } }
  • ".playSingle2", undefined
  • function addPlayer(coverSelector, playerOptions) { const cover = document.querySelector(coverSelector); const wrapper = manageUI.getWrapper(cover); const callback = managePlayer.adder(wrapper, playerOptions); manageCover.addCoverHandler(coverSelector, callback); }
  • { playerVars: { end: 1800, playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g", start: 150 } }
  • ".playSingle3", undefined

The console logs tell me that.
 
Don't worry about the console logs. Those are just there to help you debug.
There are 3 console logs in here now: Edit fiddle - JSFiddle - Code Playground

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

I don't understand what I am looking at.
First of all, those console logs need to be fixed
JavaScript:
    console.log(".playSingle" + [index],
    console.log(playerVarsList[value] || {}));

JavaScript:
    console.log(".playSingle" + index);
    console.log(playerVarsList[value]);
 
First of all, those console logs need to be fixed
JavaScript:
    console.log(".playSingle" + [index],
    console.log(playerVarsList[value] || {}));

JavaScript:
    console.log(".playSingle" + index);
    console.log(playerVarsList[value]);

I just fixed them here: Edit fiddle - JSFiddle - Code Playground

They tell me this:

  • function addPlayer(coverSelector, playerOptions) { const cover = document.querySelector(coverSelector); const wrapper = manageUI.getWrapper(cover); const callback = managePlayer.adder(wrapper, playerOptions); manageCover.addCoverHandler(coverSelector, callback); }
  • ".playSingle0"
  • { playerVars: { playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g" } }
  • function addPlayer(coverSelector, playerOptions) { const cover = document.querySelector(coverSelector); const wrapper = manageUI.getWrapper(cover); const callback = managePlayer.adder(wrapper, playerOptions); manageCover.addCoverHandler(coverSelector, callback); }
  • ".playSingle1"
  • { videoId: "0dgNc5S8cLI" }
  • function addPlayer(coverSelector, playerOptions) { const cover = document.querySelector(coverSelector); const wrapper = manageUI.getWrapper(cover); const callback = managePlayer.adder(wrapper, playerOptions); manageCover.addCoverHandler(coverSelector, callback); }
  • ".playSingle2"
  • { playerVars: { list: "PLYeOyMz9C9kYmnPHfw5-ItOxYBiMG4amq", listType: "playlist" } }
  • function addPlayer(coverSelector, playerOptions) { const cover = document.querySelector(coverSelector); const wrapper = manageUI.getWrapper(cover); const callback = managePlayer.adder(wrapper, playerOptions); manageCover.addCoverHandler(coverSelector, callback); }
  • ".playSingle3"
  • { playerVars: { end: 1800, playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g", start: 150 } }
 
I just fixed them here: Edit fiddle - JSFiddle - Code Playground

They tell me this:
Ok, this is good. Now, coming back to my earlier question: is your intention to loop over all of the items in the array, or do you just need to get a particular item? From ['0', '3', '5', '7']... I am asking this because in our previous conversation you said it's supposed to work in random order, I think
 
So, I went ahead and did the same thing I have been asking you to do. Pull your code into 3 separate files, .html, .css, .js. When I ran it locally, I still get the same error as with your code:
View attachment 1958

But that is not the code I am trying to have work.

It's the code with the console log statements I am trying to have work: Edit fiddle - JSFiddle - Code Playground

JavaScript:
['0', '3', '5', '7'].forEach(function callback(value, index) {
    console.log(players.add);
    console.log(".playSingle" + index);
    console.log(playerVarsList[value]);
  });
 
But that is not the code I am trying to have work.

It's the code with the console log statements I am trying to have work: Edit fiddle - JSFiddle - Code Playground

JavaScript:
['0', '3', '5', '7'].forEach(function callback(value, index) {
    console.log(players.add);
    console.log(".playSingle" + index);
    console.log(playerVarsList[value]);
  });
coming back to this....
1673738568737.png
all you need is to call players.add
 
Have you tried actually debugging it to see why it doesn't? ;)
It says this:

Edit fiddle - JSFiddle - Code Playground
  • JavaScript:
    function addPlayer(coverSelector, playerOptions) {  const cover = document.querySelector(coverSelector);  const wrapper = manageUI.getWrapper(cover);  const callback = managePlayer.adder(wrapper, playerOptions);  manageCover.addCoverHandler(coverSelector, callback); }
    ".playSingle0"
    {  playerVars: {    playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"  } }
    function addPlayer(coverSelector, playerOptions) {  const cover = document.querySelector(coverSelector);  const wrapper = manageUI.getWrapper(cover);  const callback = managePlayer.adder(wrapper, playerOptions);  manageCover.addCoverHandler(coverSelector, callback); }
    ".playSingle1"
    undefined
    function addPlayer(coverSelector, playerOptions) {  const cover = document.querySelector(coverSelector);  const wrapper = manageUI.getWrapper(cover);  const callback = managePlayer.adder(wrapper, playerOptions);  manageCover.addCoverHandler(coverSelector, callback); }
    ".playSingle2"
    undefined
    function addPlayer(coverSelector, playerOptions) {  const cover = document.querySelector(coverSelector);  const wrapper = manageUI.getWrapper(cover);  const callback = managePlayer.adder(wrapper, playerOptions);  manageCover.addCoverHandler(coverSelector, callback); }
    ".playSingle3"
    {  videoId: "0dgNc5S8cLI" }
    "fadeInExit"
 
It says this:

Edit fiddle - JSFiddle - Code Playground
  • JavaScript:
    function addPlayer(coverSelector, playerOptions) {  const cover = document.querySelector(coverSelector);  const wrapper = manageUI.getWrapper(cover);  const callback = managePlayer.adder(wrapper, playerOptions);  manageCover.addCoverHandler(coverSelector, callback); }
    ".playSingle0"
    {  playerVars: {    playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"  } }
    function addPlayer(coverSelector, playerOptions) {  const cover = document.querySelector(coverSelector);  const wrapper = manageUI.getWrapper(cover);  const callback = managePlayer.adder(wrapper, playerOptions);  manageCover.addCoverHandler(coverSelector, callback); }
    ".playSingle1"
    undefined
    function addPlayer(coverSelector, playerOptions) {  const cover = document.querySelector(coverSelector);  const wrapper = manageUI.getWrapper(cover);  const callback = managePlayer.adder(wrapper, playerOptions);  manageCover.addCoverHandler(coverSelector, callback); }
    ".playSingle2"
    undefined
    function addPlayer(coverSelector, playerOptions) {  const cover = document.querySelector(coverSelector);  const wrapper = manageUI.getWrapper(cover);  const callback = managePlayer.adder(wrapper, playerOptions);  manageCover.addCoverHandler(coverSelector, callback); }
    ".playSingle3"
    {  videoId: "0dgNc5S8cLI" }
    "fadeInExit"
You didn't remove the console logs, didn't you?
 
coming back to this....
View attachment 1959
PLEASE LOOK HERE!!!!! THIS HAS WHAT YOU NEED. NOW PLEASE USE THIS! INSTEAD OF CALLING players().... CALL IT LIKE IT IS IN THE CODE YOU ARE USING AS A TEMPLATE:
players.add()... PLEASE DO THIS THEN DO WHAT I HAVE STATED AT THE BOTTOM. PLEASE LET ME KNOW WHEN YOU HAVE DONE SO.


please stop using jsFiddle for this. PLEASE COPY THE HTML AND CSS INTO A FILE AND SAVE IT. PLEASE COPY THE JS CODE AND SAVE IT IN A FILE.

WHAT YOUR HTML FILE SHOULD LOOK LIKE:
HTML:
<html>
    <head>
        <script type="text/javascript" src="path/to/your/file.js"></script>
    </head>
    <body>
        <style>
            //YOUR CSS CODE HERE
        </style>

        //YOUR HTML CODE HERE
    </body>
</html>

the only thing that should be in your .js file should be all that javascript code you wrote.
Now, how to view it: DOUBLE CLICK ON your .html file to view it in browser.
 
totalP is getting replaced with what?

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

  ['0', '3', '5', '7'].forEach(function callback(value, index) {
  players.add(".playSingle" + index, (playerVarsList[index] || {}));
  });
 
totalP is getting replaced with what?

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

  ['0', '3', '5', '7'].forEach(function callback(value, index) {
  players.add(".playSingle" + index, (playerVarsList[index] || {}));
  });
querySelectorAll returns an array of Nodes which contain elements that have the attribute "data-container" with a value of "play1". If there are multiple elements with that, then use querySelectorAll. If there is only one element, please use querySelector
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom