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

htmlcssjavascript28 · Nov 27, 2022

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.

htmlcssjavascript28 · Jan 6, 2023

Antero360 said:
What is the definition of the players function

What do you mean?

htmlcssjavascript28 · Jan 6, 2023

Antero360 said:
So since players is not an array, you shouldn't be using the .add() function on it.

I am confused still.

Removing .add() I get this error.

I did this the wrong way?

I was supposed to do something else?

JavaScript:

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

Then I get this error: https://jsfiddle.net/tgLhursf/

Uncaught TypeError: players is not a function

Antero360 · Jan 6, 2023

htmlcssjavascript28 said:
I am confused still.

Removing .add() I get this error.

I did this the wrong way?

I was supposed to do something else?

JavaScript:

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

Then I get this error: https://jsfiddle.net/tgLhursf/

This is why I asked earlier lol, whether players was an array or not. You said it wasn't

htmlcssjavascript28 · Jan 7, 2023

Antero360 said:
What is the definition of the players function?

JavaScript:

const players = (function coverUIPlayerFacade() {


  function addPlayer(coverSelector, playerOptions) {
    const cover = document.querySelector(coverSelector);
    const wrapper = manageUI.getWrapper(cover);
    const callback = managePlayer.adder(wrapper, playerOptions);
    manageCover.addCoverHandler(coverSelector, callback);
  }


  function init() {
    manageCover.init({
      container: ".container",
      playButton: ".cover"
    });


    manageUI.init({});
    manageUI.addExitHandlers(managePlayer.removePlayerHandler);
  }


  return {
    add: addPlayer,
    init
  };
}());

htmlcssjavascript28 · Jan 7, 2023

What should I be doing now?

I am all confused right now.

How do I get the code working?

Antero360 · Jan 7, 2023

htmlcssjavascript28 said:
What should I be doing now?

I am all confused right now.

How do I get the code working?

If I had to take a guess, I would go with .addPlayer() sounds appropriate

htmlcssjavascript28 · Jan 7, 2023

Antero360 said:
If I had to take a guess, I would go with .addPlayer() sounds appropriate

Then what? https://jsfiddle.net/nu602xe5/1/

How do I get the code to work?

JavaScript:

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

Antero360 · Jan 7, 2023

htmlcssjavascript28 said:
Then what? https://jsfiddle.net/nu602xe5/1/

How do I get the code to work?

JavaScript:

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

ok now that looks good, except for one thing:
playerVarsList is not an array. It is a JSON object

htmlcssjavascript28 · Jan 7, 2023

Antero360 said:
ok now that looks good, except for one thing:
playerVarsList is not an array. It is a JSON object

What am I making cahnges to in here?

JavaScript:

function onYouTubeIframeAPIReady() {
  let playerVarsList = {
    "0": {
      playerVars: {
        playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
      }
    },
    "3": {
      videoId: "0dgNc5S8cLI"
    },
    "5": {
      playerVars: {
        list: "PLYeOyMz9C9kYmnPHfw5-ItOxYBiMG4amq",
        listType: "playlist"
      }
    },
    "7": {
      playerVars: {
        end: 1800,
        playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g",
        start: 150


      }


    }
  };
  //to add the player to all the play buttons
  const totalP = document.querySelectorAll("[data-container=\"play1\"]");
  //looping over all the play buttons and adding player to that


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


  players.addPlayer(".playInitial", {});


}

htmlcssjavascript28 · Jan 7, 2023

Antero360 said:
ok now that looks good, except for one thing:
playerVarsList is not an array. It is a JSON object

What exactly should I be doing now?

How do I get the code working? https://jsfiddle.net/nu602xe5/1/

Were you wanting me to do something in the code?

htmlcssjavascript28 · Jan 9, 2023

How do I get the code back to working? https://jsfiddle.net/nu602xe5/1/

How many things are left to be done in the code?

JavaScript:

const players = (function coverUIPlayerFacade() {


  function addPlayer(coverSelector, playerOptions) {
    const cover = document.querySelector(coverSelector);
    const wrapper = manageUI.getWrapper(cover);
    const callback = managePlayer.adder(wrapper, playerOptions);
    manageCover.addCoverHandler(coverSelector, callback);
  }


  function init() {
    manageCover.init({
      container: ".container",
      playButton: ".cover"
    });


    manageUI.init({});
    manageUI.addExitHandlers(managePlayer.removePlayerHandler);
  }


  return {
    add: addPlayer,
    init
  };
}());


players.init();


function onYouTubeIframeAPIReady() {
  let playerVarsList = {
    "0": {
      playerVars: {
        playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
      }
    },
    "3": {
      videoId: "0dgNc5S8cLI"
    },
    "5": {
      playerVars: {
        list: "PLYeOyMz9C9kYmnPHfw5-ItOxYBiMG4amq",
        listType: "playlist"
      }
    },
    "7": {
      playerVars: {
        end: 1800,
        playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g",
        start: 150


      }


    }
  };
  //to add the player to all the play buttons
  const totalP = document.querySelectorAll("[data-container=\"play1\"]");
  //looping over all the play buttons and adding player to that


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


  players.addPlayer(".playInitial", {});


}

Antero360 · Jan 10, 2023

htmlcssjavascript28 said:

What am I making cahnges to in here?

JavaScript:

function onYouTubeIframeAPIReady() {
  let playerVarsList = {
    "0": {
      playerVars: {
        playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
      }
    },
    "3": {
      videoId: "0dgNc5S8cLI"
    },
    "5": {
      playerVars: {
        list: "PLYeOyMz9C9kYmnPHfw5-ItOxYBiMG4amq",
        listType: "playlist"
      }
    },
    "7": {
      playerVars: {
        end: 1800,
        playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g",
        start: 150


      }


    }
  };
  //to add the player to all the play buttons
  const totalP = document.querySelectorAll("[data-container=\"play1\"]");
  //looping over all the play buttons and adding player to that


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


  players.addPlayer(".playInitial", {});


}

JavaScript:

  ['0', '3', '5', '7'].forEach(function callback(value, index) {
    players.addPlayer(`.playSingle${index}`, (playerVarsList[value] || {}));
  });

That should do it I believe.

htmlcssjavascript28 · Jan 10, 2023

Antero360 said:
JavaScript:

['0', '3', '5', '7'].forEach(function callback(value, index) { players.addPlayer(`.playSingle${index}`, (playerVarsList[value] || {})); });

That should do it I believe.

Did what you told me to do in the code, did it work for you?

Did I do something wrong?

or, did I forget to do something?

The code is not working: https://jsfiddle.net/Lfr5g3ed/

players.addPlayer is not a function

JavaScript:

//to add the player to all the play buttons
  const totalP = document.querySelectorAll("[data-container=\"play1\"]");
  //looping over all the play buttons and adding player to that
  ['0', '3', '5', '7'].forEach(function callback(index, value) {
    players.addPlayer(`.playSingle${index}`, (playerVarsList[value] || {}));
  });
  players.addPlayer(".playInitial", {});
}

Code still doesn't work here:

Error gone: https://jsfiddle.net/Lfr5g3ed/2/

JavaScript:

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

  players.add(".playInitial", {});

}

Antero360 · Jan 10, 2023

htmlcssjavascript28 said:
Did what you told me to do in the code, did it work for you?

Did I do something wrong?

or, did I forget to do something?

The code is not working: https://jsfiddle.net/Lfr5g3ed/

JavaScript:

//to add the player to all the play buttons const totalP = document.querySelectorAll("[data-container=\"play1\"]"); //looping over all the play buttons and adding player to that ['0', '3', '5', '7'].forEach(function callback(index, value) { players.addPlayer(`.playSingle${index}`, (playerVarsList[value] || {})); }); players.addPlayer(".playInitial", {}); }

Code still doesn't work here:

Error gone: https://jsfiddle.net/Lfr5g3ed/2/

JavaScript:

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

Whether or not it will work with your addPlayer() function is a different story, but you should now be at least passing in the right data to the function. Now for your favorite task of all time: DEBUGGING

.

htmlcssjavascript28 · Jan 10, 2023

Antero360 said:
View attachment 1946

View attachment 1947

Whether or not it will work with your addPlayer() function is a different story, but you should now be at least passing in the right data to the function. Now for your favorite task of all time: DEBUGGING .

0, 3, 5, 7, the numbers match.

The code is supposed to work with the numbers not in order like that.

Are you telling me something different?

htmlcssjavascript28 · Jan 10, 2023

Maybe it can't work in the code using .forEach.

Antero360 · Jan 10, 2023

htmlcssjavascript28 said:
0, 3, 5, 7, the numbers match.

The code is supposed to work with the numbers not in order like that.

Are you telling me something different?

The idea is the same, in order to get the right object from the playerVarsList, you need to get the value of whatever index from that array, and pass it as a parameter to playerVarsList

Antero360 · Jan 10, 2023

htmlcssjavascript28 said:
Maybe it can't work in the code using .forEach.

forEach, is a loop...meaning that anything that you are calling .forEach on, will be iterated in order as it appears in the array. If that is not your intention, then please see my suggestion above

htmlcssjavascript28 · Jan 11, 2023

Antero360 said:
The idea is the same, in order to get the right object from the playerVarsList, you need to get the value of whatever index from that array, and pass it as a parameter to playerVarsList

How do I do that then?

If that will have the code working, where the videos will be viewable.

Antero360 · Jan 12, 2023

htmlcssjavascript28 said:
How do I do that then?

If that will have the code working, where the videos will be viewable.

Let's look back at your code there with my suggestions:

ok... so let's back up and try this again. So what your code snippet is telling me: "I want to loop through an array of strings that represent the numbers 0,3,5,7. For every string in this array, I want to call a function called addPlayer, and pass it 2 parameters. Parameter1 will be a string made up of the word 'playSingle' and the index of the current element I am looking at in the array. This parameter will represent a css class I am going to give an element. Parameter2 will be a json object that lives in within the json object called playerVarsList. The json object that will be passed into the addPlayer function will be the object that corresponds to the value of the current element in the array I am looping through. The current element's value will be the key that will get passed to playerVarsList in order to get the json object. If there is no value at that key, then an empty json object will be passed. "

My question to you, and please think about this before you reply: What are you intending to do? Do you really need to loop through that array and follow the code that you currently have, OR do you just need to only grab one element from that array?

Now, if you recall, I had asked you about players being an array...if you will please reflect on your own response.

Then we had a whole conversation about it
I went ahead and tried that snippet

Since players is a function, and in your return statement, you are returning an object of functions to call. In your case, you are returning the addPlayer function, but you are calling it "add", which I misunderstood. So I do apologize for causing a bit of confusion on that part. But yes, in your case, rather than calling on .addPlayer, you will be calling players.add(param1, param2);

Welcome!

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

Silver Coder

Silver Coder

Silver Coder

Software Developer

Silver Coder

Silver Coder

Software Developer

Silver Coder

Software Developer

Silver Coder

Silver Coder

Silver Coder

Software Developer

Silver Coder

Software Developer

Silver Coder

Silver Coder

Software Developer

Software Developer

Silver Coder

Software Developer

Log in

Share this page

Buy us a coffee!

About Us

Site links

Stay Connected

We value your privacy