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

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
The problem is here:

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

It's returning undefined for the second video.

How would that be changed or fixed in the code?

I was told that is the problem area.

Getting closer: This function isn't passing the wrapper to players

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

Was also told this:

the querySelectorAll(".wrap") is only finding one. Whereas, querySelectorAll(".cover") is finding two. const allCovers = document.querySelectorAll(".cover"); const allWrappers = document.querySelectorAll(".wrap");
Click to expand...
 
Last edited:
Upvote 0 Downvote
htmlcssjavascript28 said:
The problem is here:

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

It's returning undefined for the second video.

How would that be changed or fixed in the code?

I was told that is the problem area.

Getting closer: This function isn't passing the wrapper to players

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

Was also told this:
Click to expand...
yup that will do it
 
Upvote 0 Downvote
Does this help at all? https://jsfiddle.net/v3btmr6a/

"getWrapper, players[index].wrapper", undefined
Click to expand...

JavaScript: 
function getWrapper(cover) {
    console.log('getWrapper, cover', cover)
    const index = players.findIndex(
      (player) => player.cover === cover
    );
    console.log('getWrapper, index', index)
    console.log('getWrapper, players', players)
    console.log('getWrapper, players[index]', players[index])
    console.log('getWrapper, players[index].wrapper', players[index].wrapper)
    return players[index].wrapper;
  }
 
Last edited:
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
Solution
If you had to pick one of these, or one of your own, which way written do you like the best?

What would be the best way in your judgment?

Which would be a good configuration?

For it to be set up one way.

1) https://jsfiddle.net/jetuxmc1/

JavaScript: 
document.querySelectorAll('button[data-id]').forEach(function(button) {
    button.addEventListener('click', function(e) {
      const videoContainer = document.querySelector('.video');
      videoContainer.setAttribute('data-id', button.getAttribute('data-id'))
    });
  });

2) https://jsfiddle.net/jetuxmc1/1/

JavaScript: 
document.querySelectorAll('button[data-id]').forEach(function(button) {
  button.addEventListener('click', function (e) {
    document.querySelector('.video').dataset.id = e.target.dataset.id;
  });
});

3) https://jsfiddle.net/jetuxmc1/2/

JavaScript: 
const playButtons = document.querySelectorAll('button.cover');

function buttonClick(event) {
  var videoContainer = document.querySelector('.video');
  const button = event.target.getAttribute('data-id');
  videoContainer.setAttribute('data-id', button)
}

for (const button of playButtons) {
  button.addEventListener('click', buttonClick);
}

4) https://jsfiddle.net/jetuxmc1/4/

JavaScript: 
const playButtons = document.querySelectorAll('button.cover');

function buttonClick(event) {
  const videoContainer = document.querySelector('.video');
  const att = event.target.getAttribute('data-id');
  videoContainer.setAttribute('data-id', att)
}

for (let i = 0; i < playButtons.length; i++) {
  const button = playButtons[i];
  button.addEventListener('click', buttonClick);
}

5) https://jsfiddle.net/jetuxmc1/6/

JavaScript: 
const playButtons = document.querySelectorAll('button.cover');

function buttonClick() {
  const videoContainer = document.querySelector('.video');
  const att = this.getAttribute('data-id');
  videoContainer.setAttribute('data-id', att)
}

for (let i = 0; i < playButtons.length; i++) {
  const button = playButtons[i];
  button.addEventListener('click', buttonClick);
}

6) https://jsfiddle.net/jetuxmc1/7/

JavaScript: 
const button = document.querySelectorAll('button.cover');

button.forEach(function addToPlayers(button, cover) {
  button.addEventListener('click', function() {
    var videoContainer = document.querySelector('.video');
    videoContainer.setAttribute('data-id', button.getAttribute('data-id'))

  });
});

7) https://jsfiddle.net/jetuxmc1/9/

JavaScript: 
document.querySelectorAll('button[data-id]').forEach(function(button) {
  button.addEventListener('click', function() {
    const videoContainer = document.querySelector('.video');
    videoContainer.setAttribute('data-id', button.getAttribute('data-id'))
  });
});
 
Last edited:
Upvote 0 Downvote
htmlcssjavascript28 said:
If you had to pick one of these, or one of your own, which way written do you like the best?

What would be the best way in your judgment?

Which would be a good configuration?

For it to be set up one way.

1) https://jsfiddle.net/jetuxmc1/

JavaScript: 
document.querySelectorAll('button[data-id]').forEach(function(button) {
    button.addEventListener('click', function(e) {
      const videoContainer = document.querySelector('.video');
      videoContainer.setAttribute('data-id', button.getAttribute('data-id'))
    });
  });

2) https://jsfiddle.net/jetuxmc1/1/

JavaScript: 
document.querySelectorAll('button[data-id]').forEach(function(button) {
  button.addEventListener('click', function (e) {
    document.querySelector('.video').dataset.id = e.target.dataset.id;
  });
});

3) https://jsfiddle.net/jetuxmc1/2/

JavaScript: 
const playButtons = document.querySelectorAll('button.cover');

function buttonClick(event) {
  var videoContainer = document.querySelector('.video');
  const button = event.target.getAttribute('data-id');
  videoContainer.setAttribute('data-id', button)
}

for (const button of playButtons) {
  button.addEventListener('click', buttonClick);
}

4) https://jsfiddle.net/jetuxmc1/4/

JavaScript: 
const playButtons = document.querySelectorAll('button.cover');

function buttonClick(event) {
  const videoContainer = document.querySelector('.video');
  const att = event.target.getAttribute('data-id');
  videoContainer.setAttribute('data-id', att)
}

for (let i = 0; i < playButtons.length; i++) {
  const button = playButtons[i];
  button.addEventListener('click', buttonClick);
}

5) https://jsfiddle.net/jetuxmc1/6/

JavaScript: 
const playButtons = document.querySelectorAll('button.cover');

function buttonClick() {
  const videoContainer = document.querySelector('.video');
  const att = this.getAttribute('data-id');
  videoContainer.setAttribute('data-id', att)
}

for (let i = 0; i < playButtons.length; i++) {
  const button = playButtons[i];
  button.addEventListener('click', buttonClick);
}

6) https://jsfiddle.net/jetuxmc1/7/

JavaScript: 
const button = document.querySelectorAll('button.cover');

button.forEach(function addToPlayers(button, cover) {
  button.addEventListener('click', function() {
    var videoContainer = document.querySelector('.video');
    videoContainer.setAttribute('data-id', button.getAttribute('data-id'))

  });
});

7) https://jsfiddle.net/jetuxmc1/9/

JavaScript: 
document.querySelectorAll('button[data-id]').forEach(function(button) {
  button.addEventListener('click', function() {
    const videoContainer = document.querySelector('.video');
    videoContainer.setAttribute('data-id', button.getAttribute('data-id'))
  });
});
Click to expand...
Any of the above look good...the issue is more or less with the buttons and the class 'cover'. Calling the buttons 'allCovers', function (cover, wrapper){}
 
Upvote 0 Downvote
I have a question:

I was given instructions to rewrite this code without the .video element in it?

How would that be done here? https://jsfiddle.net/sj9kdq6o/

JavaScript: 
document.querySelectorAll('button.cover').forEach(function(button) {
  button.addEventListener('click', function (event) {
    document.querySelector('.video').dataset.id = event.target.dataset.id;
  });
});

This was the answer:

JavaScript: 
const myVideo = document.querySelector('.video');

document.querySelectorAll('button.cover').forEach(function(button) {
  button.addEventListener('click', function(event) {
    myVideo.dataset.id = event.target.dataset.id;
  });
});
 
Last edited:
Upvote 0 Downvote
For the purpose of creating 1 added/unique container that is different from the others.

For the code to be able to work with another container added to it, would something get changed or adjusted in the findPlayers function?

Currently, clicking on the button takes you to .play2, where it opens, just no video is appearing.

Broken Code, I am trying to get working. Has the 1 added container in it.
https://jsfiddle.net/aouymthe/

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

  <button class="exitInitial" type="button" aria-label="Open"></button>
</div>

FLFNrJt.png
OyjNwHK.png



How would I be able to have a video appear in here? https://jsfiddle.net/aouymthe/

The added container that was added.

Where in the code would adjustments need to be made to allow for a 2nd container to be added?

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="panel2"></div>
    </div>
    <button class="exit" type="button" title="Exit" aria-label="Close"></button>
  </div>
</div>

It went from this: Working code. https://jsfiddle.net/7apg90wz/

2 buttons / 2 containers

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

to this: Working code. https://jsfiddle.net/cr0v3ptu/

96 buttons/ 1 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
      });
    });
  }

To be able to do this, what would get changed?

Would something in that part of the code get changed?

How would I be able to have a video show/appear in the added container?

Where it would then become: 96 buttons / 2 containers.

What would get changed in the code to allow for a 2nd container to be added?

How the code works is, clicking on a button takes you to a video.

Broken Code: is set up using 2 containers. https://jsfiddle.net/aouymthe/
 
Last edited:
Upvote 0 Downvote
htmlcssjavascript28 said:
For the purpose of creating 1 added/unique container that is different from the others.

Currently, clicking on the button takes you to .play2, where it opens, just no video is appearing.

Broken Code, I am trying to get working. Has the 1 added container in it.
https://jsfiddle.net/aouymthe/

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

  <button class="exitInitial" type="button" aria-label="Open"></button>
</div>

FLFNrJt.png
OyjNwHK.png



How would I be able to have a video appear in here? https://jsfiddle.net/aouymthe/

The added container that was added.

Where in the code would adjustments need to be made to allow for a 2nd container to be added?

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="panel2"></div>
    </div>
    <button class="exit" type="button" title="Exit" aria-label="Close"></button>
  </div>
</div>

It went from this: Working code. https://jsfiddle.net/7apg90wz/

2 buttons / 2 containers

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

to this: Working code. https://jsfiddle.net/cr0v3ptu/

96 buttons/ 1 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
      });
    });
  }

To be able to do this, what would get changed?

Would something in that part of the code get changed?

How would I be able to have a video show/appear in the added container?

Where it would then become: 96 buttons / 2 containers.

What would get changed in the code to allow for a 2nd container to be added?

How the code works is, clicking on a button takes you to a video.

Broken Code: is set up using 2 containers. https://jsfiddle.net/aouymthe/
Click to expand...
HI there sorry for the late reply. Had an unexpected and tragic event happen to someone very close to me, and that is all I will say about it.
Give me a few minutes to catch up on your responses.
 
Upvote 0 Downvote
htmlcssjavascript28 said:
For the purpose of creating 1 added/unique container that is different from the others.

For the code to be able to work with another container added to it, would something get changed or adjusted in the findPlayers function?

Currently, clicking on the button takes you to .play2, where it opens, just no video is appearing.

Broken Code, I am trying to get working. Has the 1 added container in it.
https://jsfiddle.net/aouymthe/

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

  <button class="exitInitial" type="button" aria-label="Open"></button>
</div>

FLFNrJt.png
OyjNwHK.png



How would I be able to have a video appear in here? https://jsfiddle.net/aouymthe/

The added container that was added.

Where in the code would adjustments need to be made to allow for a 2nd container to be added?

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="panel2"></div>
    </div>
    <button class="exit" type="button" title="Exit" aria-label="Close"></button>
  </div>
</div>

It went from this: Working code. https://jsfiddle.net/7apg90wz/

2 buttons / 2 containers

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

to this: Working code. https://jsfiddle.net/cr0v3ptu/

96 buttons/ 1 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
      });
    });
  }

To be able to do this, what would get changed?

Would something in that part of the code get changed?

How would I be able to have a video show/appear in the added container?

Where it would then become: 96 buttons / 2 containers.

What would get changed in the code to allow for a 2nd container to be added?

How the code works is, clicking on a button takes you to a video.

Broken Code: is set up using 2 containers. https://jsfiddle.net/aouymthe/
Click to expand...
why do you need the 2-container setup again?
 
Upvote 0 Downvote
Antero360 said:
why do you need the 2-container setup again?
Click to expand...
Hello, yes, what I am trying to do in the code is for the video to appear in the 2nd container.

https://jsfiddle.net/ak6px0t1/

When this button is clicked.

This button would have its own container.

How might I be able to do that in the code?

Currently, no video is able to be seen when it is clicked.

fgfdgfdgfdgdg.png

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

JavaScript: 
<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="panel2"></div>
    </div>
    <button class="exit" type="button" title="Exit" aria-label="Close"></button>
  </div>
</div>

Would this get changed to something else then?

How would this be able to be done in the code?

So that, one button can have its own 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
      });
    });
  }
 
Last edited:
Upvote 0 Downvote
htmlcssjavascript28 said:
Hello, yes, what I am trying to do in the code is for the video to appear in the 2nd container.

https://jsfiddle.net/ak6px0t1/

When this button is clicked.

This button would have its own container.

How might I be able to do that in the code?

Currently, no video is able to be seen when it is clicked.

View attachment 1837

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

JavaScript: 
<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="panel2"></div>
    </div>
    <button class="exit" type="button" title="Exit" aria-label="Close"></button>
  </div>
</div>

Would this get changed to something else then?

How would this be able to be done in the code?

So that, one button can have its own 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
      });
    });
  }
Click to expand...
but why do you need the 2-container layout if you already had the 1-container layout working
 
Upvote 0 Downvote
Antero360 said:
I mean, didn't you already have the 2-container implementation already set up, BEFORE?
Click to expand...

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>
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us 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