Adding additional play buttons

JavaScript
145

I’m not doing this riight.

146

Wait.

Like this?

147

How do I add a border around the whole thing?

I’m up to that.

148

Am I done?

149

You can remove that button div and rename the .button style to #playButton, to help simplify things.

150

You mean?

 .playButton2 {
    cursor: pointer;
  }
151

Paul has suggested you change from using a class selector to using an ID selector, So it should look like…

#playButton {
    cursor: pointer;
}
2 Likes
152

Thanks.

153

It would be less painful for later development to remain with class names, but the scripting code in his existing code has too many things that rely on the id instead, preventing better techniques from being used.

3 Likes
154

Slightly OT: Do you generally follow the convention of using ID selectors for JavaScript, and class selectors for CSS? That’s something I have tried to stick to, though I can see why it might not work here.

155

I fully agree. Instead of renaming the .button style declaration, it is much better to keep it as .button, add class=“button” to the playButton div.

1 Like
156

So in summary, remove the playButton2 id from the class declarations with a class name instead:

/*#playButton2 { */
.button {
    cursor: pointer;
}

And place that class name on the playButton element.

<div id="playButton2" class="button" ...>

Which gives you a better code structure that won’t break as easily when changes are made.

Rule of thumb: Don’t use identifiers for CSS styling.

1 Like
157

Like this?

Was I supposed to make changes?

<div id="#playButton2" class="button">

158

Don’t forget to change the style declaration from #playButton2 to .button

159

Like this?

 .button {
    cursor: pointer;
  }

</style>


<div class="player">
  <div class="buttonBorder">
    <div id="#playButton2" class="button">

      <div id="playButton2" onclick="
160

No - delete the first playButton2 div and move its class to the second playButton2 div.

161

huh?

162 
<div class="player">
  <div class="buttonBorder">
    <div class="button">

      <div class="button" onclick="
163 
<div class="player">
  <div class="buttonBorder">
      <div id=“playButton2” class="button" onclick="...”>
2 Likes
164

Like this?

  
 .button {
    cursor: pointer;
  }

</style>


<div class="player">
  <div class="buttonBorder">
 
      <div id="playButton2" class="button" onclick="