Visual Studio Code - Why is only the first button turning green?

ChrisMaalouf
November 25, 2022
154 views
0 votes
2 Answers

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');

Answers

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 class="card">
  <div class="topnav">
    <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 class="active" href="leg day d.html">D</a>
    <a href="arm day e.html">E</a>
  </div>
  <h1>Leg Day D</h1>
  <div class="card">
    <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 class="btn">
      <button class="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 class="card">
    <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 class="btn">
      <button class="done">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 class="card">
    <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 class="btn">
      <button class="done">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 class="card">
    <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 class="btn">
      <button class="done">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 class="card">
    <img src="images/adutora.webp" style="width:100%">
    <h1>5. Adutora</h1>
    <p>Stretch to allow wider leg</p>
    <div class="btn">
      <button class="done">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 class="card">
    <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 class="btn">
      <button class="done">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 class="card">
    <img src="images/gemeossentado.webp" style="width:100%">
    <h1>7. Seated Calf Raise</h1>
    <p>Make sure to go slow</p>
    <div class="btn">
      <button class="done">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 class="card">
    <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 class="btn">
      <button class="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>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 class="card">
    <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 class="btn">
      <button class="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>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 class="card">
    <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 class="btn">
      <button class="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>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>

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 class="card">
    <div class="topnav">
      <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 class="active" href="leg day d.html">D</a>
      <a href="arm day e.html">E</a>
    </div>
  </div>

  <div class="card">
    <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" class="">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 class="card">
    <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" class="">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 class="card">
    <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" class="">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>

Please signup or login to give your own answer.

Click here to cancel reply.

Visual Studio Code – Why is only the first button turning green?

Answers