Why is only the first button turning green?-CodePudding

I am a noobie programmer, using MAC OS and Visual Studio Code trying to build a responsive fitness routine in HTML for personal use, as a personal project.

I am trying to get all my buttons to turn green on click, the first one is turning green fine, but the rest are not. I have uploaded a code pen here: https://codepen.io/3991chris/full/OJEZwKL

Any help would be awesome!

I tried

let btnDone = document.querySelectorAll('#done');

CodePudding user response：

There's two main issues in your code. Firstly all the buttons have the same #done id applied to them, which is invalid. id must be unique within the DOM. Change these to a class.

From there you need to amend your JS code to use querySelectorAll('.done') so that it returns a collection of all the elements you can loop through. Within that loop you can bind your event handlers to each button.

Secondly, it looks like your goal is to toggle the styling of the buttons on successive clicks. Therefore you should toggle() the class on the element, not use removeClickHandler().

document.querySelectorAll('.done').forEach(btn => {
  btn.addEventListener('click', e => e.target.classList.toggle('active'));
});

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  margin: auto;
  text-align: center;
  font-family: arial;
}

.btn {
  display: flex;
  justify-content: center;
}

.btn .done.active {
  background-color: #4cae4c;
}

button {
  padding: 10px 20px;
  margin: 5px;
  background-color: black;
  color: #fff;
  border: none;
  border-radius: 5px;
}

.topnav {
  overflow: hidden;
  background-color: blue;
  flex-wrap: wrap;
}

.topnav a {
  float: left;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: red;
  color: white;
}

.topnav a.active {
  background-color: red;
  color: white;
}

<div >
  <div >
    <a href="index.html">Home</a>
    <a href="arm day a.html">A</a>
    <a href="leg day b.html">B</a>
    <a href="ab & chest day c.html">C</a>
    <a  href="leg day d.html">D</a>
    <a href="arm day e.html">E</a>
  </div>
  <h1>Leg Day D</h1>
  <div >
    <img src="images/deadlift.jpeg" style="width:100%">
    <h1>1. Deadlift</h1>
    <p>Feet at 45 angle, back straight,<br>shoulders back<br> hip stiff</p>
    <div >
      <button >Done</button>
    </div>
    <table>
      <tr>
        <th>Week</th>
        <th>Set X Rep</th>
        <th>Weight</th>
      </tr>
      <tr>
        <td>1</td>
        <td>4 * 8</td>
        <td>60 kg</td>
      </tr>
      <tr>
        <td>2</td>
        <td>5 * 8</td>
        <td>65 kg</td>
      </tr>
      <tr>
        <td>3</td>
        <td>5 * 8</td>
        <td>70 kg</td>
      </tr>
      <tr>
        <td>4</td>
        <td>4 * 8</td>
        <td>75 kg</td>
      </tr>
    </table>
  </div>

  <div >
    <img src="images/sumosquat.png" style="width:100%">
    <h1>2. SumoSquats</h1>
    <p>Feet at 45 angle, wide legs,<br> make sure back straight</p>
    <div >
      <button >Done</button>
    </div>
    <table>
      <tr>
        <th>Week</th>
        <th>Set X Rep</th>
        <th>Weight</th>
      </tr>
      <tr>
        <td>1</td>
        <td>4 * 10</td>
        <td>70 kg</td>
      </tr>
      <tr>
        <td>2</td>
        <td>5 * 10</td>
        <td>75 kg</td>
      </tr>
      <tr>
        <td>3</td>
        <td>5 * 10</td>
        <td>80 kg</td>
      </tr>
      <tr>
        <td>4</td>
        <td>4 * 10</td>
        <td>85 kg</td>
      </tr>
    </table>
  </div>

  <div >
    <img src="images/flexora.webp" style="width:100%">
    <h1>3. Flex Chair</h1>
    <p>alig knees with chair, <br> keep back on seat</p>
    <div >
      <button >Done</button>
    </div>
    <table>
      <tr>
        <th>Week</th>
        <th>Set X Rep</th>
        <th>Weight</th>
      </tr>
      <tr>
        <td>1</td>
        <td>4 * 10</td>
        <td>70 kg</td>
      </tr>
      <tr>
        <td>2</td>
        <td>5 * 10</td>
        <td>75 kg</td>
      </tr>
      <tr>
        <td>3</td>
        <td>5 * 10</td>
        <td>75 kg</td>
      </tr>
      <tr>
        <td>4</td>
        <td>4 * 10</td>
        <td>70 kg</td>
      </tr>
    </table>
  </div>

  <div >
    <img src="images/stepups.png" style="width:100%">
    <h1>4. StepUps</h1>
    <p>Use bench or box <br> and do 10 each leg,<br> up and down same leg</p>
    <div >
      <button >Done</button>
    </div>
    <table>
      <tr>
        <th>Week</th>
        <th>Set X Rep</th>
        <th>Weight</th>
      </tr>
      <tr>
        <td>1</td>
        <td>4 * 20</td>
        <td>15 kg</td>
      </tr>
      <tr>
        <td>2</td>
        <td>5 * 20</td>
        <td>20 kg</td>
      </tr>
      <tr>
        <td>3</td>
        <td>5 * 20</td>
        <td>20 kg</td>
      </tr>
      <tr>
        <td>4</td>
        <td>4 * 20</td>
        <td>25 kg</td>
      </tr>
    </table>
  </div>

  <div >
    <img src="images/adutora.webp" style="width:100%">
    <h1>5. Adutora</h1>
    <p>Stretch to allow wider leg</p>
    <div >
      <button >Done</button>
    </div>
    <table>
      <tr>
        <th>Week</th>
        <th>Set X Rep</th>
        <th>Weight</th>
      </tr>
      <tr>
        <td>1</td>
        <td>4 * 10</td>
        <td>Max kg</td>
      </tr>
      <tr>
        <td>2</td>
        <td>5 * 10</td>
        <td>Max kg</td>
      </tr>
      <tr>
        <td>3</td>
        <td>5 * 10</td>
        <td>Max kg</td>
      </tr>
      <tr>
        <td>4</td>
        <td>4 * 10</td>
        <td>Max kg</td>
      </tr>
    </table>
  </div>

  <div >
    <img src="images/pelvicthrust.jpeg" style="width:100%">
    <h1>6. Pelvic Thrust</h1>
    <p>Top of shoulders and chest<br>should be on bench</p>
    <div >
      <button >Done</button>
    </div>
    <table>
      <tr>
        <th>Week</th>
        <th>Set X Rep</th>
        <th>Weight</th>
      </tr>
      <tr>
        <td>1</td>
        <td>4 * 10</td>
        <td>70 kg</td>
      </tr>
      <tr>
        <td>2</td>
        <td>5 * 10</td>
        <td>75 kg</td>
      </tr>
      <tr>
        <td>3</td>
        <td>5 * 10</td>
        <td>80 kg</td>
      </tr>
      <tr>
        <td>4</td>
        <td>4 * 10</td>
        <td>80 kg</td>
      </tr>
    </table>
  </div>

  <div >
    <img src="images/gemeossentado.webp" style="width:100%">
    <h1>7. Seated Calf Raise</h1>
    <p>Make sure to go slow</p>
    <div >
      <button >Done</button>
    </div>
    <table>
      <tr>
        <th>Week</th>
        <th>Set X Rep</th>
        <th>Weight</th>
      </tr>
      <tr>
        <td>1</td>
        <td>4 * 10</td>
        <td>60 kg</td>
      </tr>
      <tr>
        <td>2</td>
        <td>5 * 10</td>
        <td>65 kg</td>
      </tr>
      <tr>
        <td>3</td>
        <td>5 * 10</td>
        <td>65 kg</td>
      </tr>
      <tr>
        <td>4</td>
        <td>4 * 10</td>
        <td>70 kg</td>
      </tr>
    </table>
  </div>

  <div >
    <img src="images/landminesquat.webp" style="width:100%">
    <h1>8. Landmine Squat</h1>
    <p>Feet at 45 angle, back straight,<br>shoulders back</p>
    <div >
      <button >Done</button>
    </div>
    <table>
      <tr>
        <th>Week</th>
        <th>Set X Rep</th>
        <th>Weight</th>
      </tr>
      <tr>
        <td>1</td>
        <td>4 * 8</td>
        <td>40 kg</td>
      </tr>
      <tr>
        <td>2</td>
        <td>5 * 8</td>
        <td>45 kg</td>
      </tr>
      <tr>
        <td>3</td>
        <td>5 * 8</td>
        <td>50 kg</td>
      </tr>
      <tr>
        <td>4</td>
        <td>4 * 8</td>
        <td>55 kg</td>
      </tr>
    </table>
  </div>

  <div >
    <img src="images/pullthrough.webp" style="width:100%">
    <h1>9. Pull Through</h1>
    <p>Feet at 45 angle, back straight,<br>shoulders back</p>
    <div >
      <button >Done</button>
    </div>
    <table>
      <tr>
        <th>Week</th>
        <th>Set X Rep</th>
        <th>Weight</th>
      </tr>
      <tr>
        <td>1</td>
        <td>4 * 8</td>
        <td>20 kg</td>
      </tr>
      <tr>
        <td>2</td>
        <td>5 * 8</td>
        <td>30 kg</td>
      </tr>
      <tr>
        <td>3</td>
        <td>5 * 8</td>
        <td>35 kg</td>
      </tr>
      <tr>
        <td>4</td>
        <td>4 * 8</td>
        <td>40 kg</td>
      </tr>
    </table>
  </div>

  <div >
    <img src="images/liedownlegcurl.jpeg" style="width:100%">
    <h1>10. Lie Down Leg Curl</h1>
    <p>Feet at 45 angle, back straight,<br>shoulders back</p>
    <div >
      <button >Done</button>
    </div>
    <table>
      <tr>
        <th>Week</th>
        <th>Set X Rep</th>
        <th>Weight</th>
      </tr>
      <tr>
        <td>1</td>
        <td>4 * 8</td>
        <td>50 kg</td>
      </tr>
      <tr>
        <td>2</td>
        <td>5 * 8</td>
        <td>55 kg</td>
      </tr>
      <tr>
        <td>3</td>
        <td>5 * 8</td>
        <td>60 kg</td>
      </tr>
      <tr>
        <td>4</td>
        <td>4 * 8</td>
        <td>65 kg</td>
      </tr>
    </table>
  </div>
</div>

CodePudding user response：

I add Jquery CDN, and change your javascript.
I hope you understand it.

$(document).ready(function () {
  $("div div button").click(function () {
    $(this).addClass("activeButton");
  });
});

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  margin: auto;
  text-align: center;
  font-family: arial;
}

.btn {
  display: flex;
  justify-content: center;
}

button {
  padding: 10px 20px;
  margin: 5px;
  background-color: black;
  color: #fff;
  border: none;
  border-radius: 5px;
}
.topnav {
  overflow: hidden;
  background-color: blue;
  flex-wrap: wrap;
}

.topnav a {
  float: left;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: red;
  color: white;
}

.topnav a.active {
  background-color: red;
  color: white;
}

.activeButton {
  background-color: #4cae4c;
}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV 4mjoKBsE4x3H BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>


<div >
    <div >
      <a href="index.html">Home</a>
      <a href="arm day a.html">A</a>
      <a href="leg day b.html">B</a>
      <a href="ab & chest day c.html">C</a>
      <a  href="leg day d.html">D</a>
      <a href="arm day e.html">E</a>
    </div>
  </div>

  <div >
    <h1>Day 1</h1>
    <img src="images/deadlift.jpeg" style="width:100%">
    <h1>1. Deadlift</h1>
    <p>Feet at 45 angle, back straight,<br>shoulders back<br> hip stiff</p>
    <div id="btn">
      <button id="done" >Done</button>
    </div>

    <table>
      <tr>
        <th>Week</th> <th>Set X Rep</th> <th>Weight</th>
      </tr>
      <tr>
        <td>1</td> <td>4 * 8</td> <td>60 kg</td>
      </tr>
      <tr>
        <td>2</td> <td>5 * 8</td> <td>65 kg</td>
      </tr>
      <tr>
        <td>3</td> <td>5 * 8</td> <td>70 kg</td>
      </tr>
      <tr>
        <td>4</td> <td>4 * 8</td> <td>75 kg</td>
      </tr>
    </table>
  </div>

  <div >
    <h1>Day 2</h1>
    <img src="images/deadlift.jpeg" style="width:100%">
    <h1>1. Push Up</h1>
    <p>Feet at 45 angle, back straight,<br>shoulders back<br> hip stiff</p>
    <div id="btn">
      <button id="done" >Done</button>
    </div>

    <table>
      <tr>
        <th>Week</th> <th>Set X Rep</th> <th>Weight</th>
      </tr>
      <tr>
        <td>1</td> <td>4 * 8</td> <td>60 kg</td>
      </tr>
      <tr>
        <td>2</td> <td>5 * 8</td> <td>65 kg</td>
      </tr>
      <tr>
        <td>3</td> <td>5 * 8</td> <td>70 kg</td>
      </tr>
      <tr>
        <td>4</td> <td>4 * 8</td> <td>75 kg</td>
      </tr>
    </table>
  </div>

  <div >
    <h1>Day 3</h1>
    <img src="images/deadlift.jpeg" style="width:100%">
    <h1>1. Jump</h1>
    <p>Feet at 45 angle, back straight,<br>shoulders back<br> hip stiff</p>
    <div id="btn">
      <button id="done" >Done</button>
    </div>

    <table>
      <tr>
        <th>Week</th> <th>Set X Rep</th> <th>Weight</th>
      </tr>
      <tr>
        <td>1</td> <td>4 * 8</td> <td>60 kg</td>
      </tr>
      <tr>
        <td>2</td> <td>5 * 8</td> <td>65 kg</td>
      </tr>
      <tr>
        <td>3</td> <td>5 * 8</td> <td>70 kg</td>
      </tr>
      <tr>
        <td>4</td> <td>4 * 8</td> <td>75 kg</td>
      </tr>
    </table>
  </div>