toggle buttons in each table row using JS - Javascript

MarkoShtyrkalo
April 19, 2023
72 views
1 vote
2 Answers

I’m currently facing an issue where I can’t get the button to toggle it’s group(which is on the same table row as is the shown button ), I want it to work on each table row’s group that exists(togging the hidden class on buttons). At this time all the buttons work, however only last group is affected which is in the last table row.

var toggleGroup = (group, group2, className = "hidden") => {
  group.classList.toggle(className);
  group2.classList.toggle(className);
}
var table = document.querySelector('.hour-section');

for (var i = 0, row; row = table.rows[i]; i++) {
  var group = row.querySelectorAll('.temp-percent');
  group.forEach(element => {
    element.addEventListener("click", () => {
      toggleGroup(group[0], group[1])
    });
  })
}

<table class="hour-section">
  <tbody>
    <tr>
      <td>
        <div class="info-group">
          <div class="label">Monday</div>
          <div>12 AM</div>
        </div>
      </td>
      <td>
        <img src="icons/sun.svg" class="weather-icon">
      </td>
      <td>
        <button class="info-group temp-percent">
              <div class="label">Temp</div>
              <div>75&deg;</div>
            </button>
        <button class="info-group temp-percent hidden">
              <div class="label">Chance of Precip</div>
              <div><span data-hour-precip>75</span> %</div>
            </button>
      </td>
      <td>
        <div class="info-group">
          <div class="label">FL Temp</div>
          <div>75&deg;</div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Wind</div>
          <div>7 <span class="value-sub-info">mph</span></div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Precip</div>
          <div>7 <span class="value-sub-info">in</span></div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Dew Point</div>
          <div>50&deg;</div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Humidity</div>
          <div>
            <span data-hour-humidity>75</span>
            <span class="value-sub-info">%</span>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="info-group">
          <div class="label">Monday</div>
          <div>12 AM</div>
        </div>
      </td>
      <td>
        <img src="icons/sun.svg" class="weather-icon">
      </td>
      <td>
        <button class="info-group temp-percent">
              <div class="label">Temp</div>
              <div>75&deg;</div>
            </button>
        <button class="info-group temp-percent hidden">
              <div class="label">Chance of Precip</div>
              <div><span data-hour-precip>75</span> %</div>
            </button>
      </td>
      <td>
        <div class="info-group">
          <div class="label">FL Temp</div>
          <div>75&deg;</div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Wind</div>
          <div>7 <span class="value-sub-info">mph</span></div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Precip</div>
          <div>7 <span class="value-sub-info">in</span></div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Dew Point</div>
          <div>50&deg;</div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Humidity</div>
          <div>
            <span data-hour-humidity>75</span>
            <span class="value-sub-info">%</span>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="info-group">
          <div class="label">Monday</div>
          <div>12 AM</div>
        </div>
      </td>
      <td>
        <img src="icons/sun.svg" class="weather-icon">
      </td>
      <td>
        <button class="info-group temp-percent">
              <div class="label">Temp</div>
              <div>75&deg;</div>
            </button>
        <button class="info-group temp-percent hidden">
              <div class="label">Chance of Precip</div>
              <div><span data-hour-precip>75</span> %</div>
            </button>
      </td>
      <td>
        <div class="info-group">
          <div class="label">FL Temp</div>
          <div>75&deg;</div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Wind</div>
          <div>7 <span class="value-sub-info">mph</span></div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Precip</div>
          <div>7 <span class="value-sub-info">in</span></div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Dew Point</div>
          <div>50&deg;</div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Humidity</div>
          <div>
            <span data-hour-humidity>75</span>
            <span class="value-sub-info">%</span>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="info-group">
          <div class="label">Monday</div>
          <div>12 AM</div>
        </div>
      </td>
      <td>
        <img src="icons/sun.svg" class="weather-icon">
      </td>
      <td>
        <button class="info-group temp-percent">
              <div class="label">Temp</div>
              <div>75&deg;</div>
            </button>
        <button class="info-group temp-percent hidden">
              <div class="label">Chance of Precip</div>
              <div><span data-hour-precip>75</span> %</div>
            </button>
      </td>
      <td>
        <div class="info-group">
          <div class="label">FL Temp</div>
          <div>75&deg;</div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Wind</div>
          <div>7 <span class="value-sub-info">mph</span></div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Precip</div>
          <div>7 <span class="value-sub-info">in</span></div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Dew Point</div>
          <div>50&deg;</div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Humidity</div>
          <div>
            <span data-hour-humidity>75</span>
            <span class="value-sub-info">%</span>
          </div>
        </div>
      </td>
    </tr>

  </tbody>
</table>

Tags: javascript

Answers

- alexiss
- April 19, 2023 at 11:32 pm
- 0 votes
0
It seems that the issue is related to the usage of arrow functions inside the event listener, which is causing the last group to be affected when any of the buttons are clicked. To fix this issue, you can change the arrow function to a regular function and use the this keyword. Also, since you are adding an event listener to both buttons in the group, you can use only one forEach loop for all rows. Here’s the updated JavaScript code:
```
var toggleGroup = (group, group2, className = "hidden") => {
  group.classList.toggle(className);
  group2.classList.toggle(className);
}

var table = document.querySelector('.hour-section');
var allRows = table.querySelectorAll('tr');

allRows.forEach(row => {
  var group = row.querySelectorAll('.temp-percent');
  
  group.forEach(element => {
    element.addEventListener("click", function() { toggleGroup(group[0], group[1]) });
  })
});
```
Login or Signup to reply.

There is a very simple solution to this which is to change some var here to const or let AND put a let in the loop iterator. Note I also put (event) in there which I used to illustrate the scope of this and thus the use the the event.target;

Note I used the border only to illustrate what has that class currently.

const toggleGroup = (group, group2, className = "hidden") => {
  group.classList.toggle(className);
  group2.classList.toggle(className);
}
const table = document.querySelector('.hour-section');

for (let i = 0, row; row = table.rows[i]; i++) {
  const group = row.querySelectorAll('.temp-percent');
  group.forEach(element => {
    element.addEventListener("click", (event) => {
      console.clear();
      console.log(this == window); //true
      console.log(this.outerHTML); //undefined
      console.log(event.target.outerHTML); //the element
      toggleGroup(group[0], group[1])
    });
  })
}

.hidden {
  border: solid 2px green;
}

<table class="hour-section">
  <tbody>
    <tr>
      <td>
        <div class="info-group">
          <div class="label">Monday</div>
          <div>12 AM</div>
        </div>
      </td>
      <td>
        <img src="icons/sun.svg" class="weather-icon">
      </td>
      <td>
        <button class="info-group temp-percent">
              <div class="label">Temp</div>
              <div>75&deg;</div>
            </button>
        <button class="info-group temp-percent hidden">
              <div class="label">Chance of Precip</div>
              <div><span data-hour-precip>75</span> %</div>
            </button>
      </td>
      <td>
        <div class="info-group">
          <div class="label">FL Temp</div>
          <div>75&deg;</div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Wind</div>
          <div>7 <span class="value-sub-info">mph</span></div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Precip</div>
          <div>7 <span class="value-sub-info">in</span></div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Dew Point</div>
          <div>50&deg;</div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Humidity</div>
          <div>
            <span data-hour-humidity>75</span>
            <span class="value-sub-info">%</span>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="info-group">
          <div class="label">Monday</div>
          <div>12 AM</div>
        </div>
      </td>
      <td>
        <img src="icons/sun.svg" class="weather-icon">
      </td>
      <td>
        <button class="info-group temp-percent">
              <div class="label">Temp</div>
              <div>75&deg;</div>
            </button>
        <button class="info-group temp-percent hidden">
              <div class="label">Chance of Precip</div>
              <div><span data-hour-precip>75</span> %</div>
            </button>
      </td>
      <td>
        <div class="info-group">
          <div class="label">FL Temp</div>
          <div>75&deg;</div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Wind</div>
          <div>7 <span class="value-sub-info">mph</span></div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Precip</div>
          <div>7 <span class="value-sub-info">in</span></div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Dew Point</div>
          <div>50&deg;</div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Humidity</div>
          <div>
            <span data-hour-humidity>75</span>
            <span class="value-sub-info">%</span>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="info-group">
          <div class="label">Monday</div>
          <div>12 AM</div>
        </div>
      </td>
      <td>
        <img src="icons/sun.svg" class="weather-icon">
      </td>
      <td>
        <button class="info-group temp-percent">
              <div class="label">Temp</div>
              <div>75&deg;</div>
            </button>
        <button class="info-group temp-percent hidden">
              <div class="label">Chance of Precip</div>
              <div><span data-hour-precip>75</span> %</div>
            </button>
      </td>
      <td>
        <div class="info-group">
          <div class="label">FL Temp</div>
          <div>75&deg;</div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Wind</div>
          <div>7 <span class="value-sub-info">mph</span></div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Precip</div>
          <div>7 <span class="value-sub-info">in</span></div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Dew Point</div>
          <div>50&deg;</div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Humidity</div>
          <div>
            <span data-hour-humidity>75</span>
            <span class="value-sub-info">%</span>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="info-group">
          <div class="label">Monday</div>
          <div>12 AM</div>
        </div>
      </td>
      <td>
        <img src="icons/sun.svg" class="weather-icon">
      </td>
      <td>
        <button class="info-group temp-percent">
              <div class="label">Temp</div>
              <div>75&deg;</div>
            </button>
        <button class="info-group temp-percent hidden">
              <div class="label">Chance of Precip</div>
              <div><span data-hour-precip>75</span> %</div>
            </button>
      </td>
      <td>
        <div class="info-group">
          <div class="label">FL Temp</div>
          <div>75&deg;</div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Wind</div>
          <div>7 <span class="value-sub-info">mph</span></div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Precip</div>
          <div>7 <span class="value-sub-info">in</span></div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Dew Point</div>
          <div>50&deg;</div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Humidity</div>
          <div>
            <span data-hour-humidity>75</span>
            <span class="value-sub-info">%</span>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Second example with different use which is probably how I would have done this: note the simpler loop and use of the target to get the container parent and the other button in that context

const toggleGroup = (event) => {
  const parentRow = event.target.closest('td');
  const me = parentRow.querySelector('.temp-percent[data-toggleme="on"]');
  const other = parentRow.querySelector('.temp-percent[data-toggleme="off"]');
  me.dataset.toggleme = "off";
  other.dataset.toggleme = "on";
}
const table = document.querySelector('.hour-section');
const group = table.querySelectorAll('.temp-percent')
  .forEach(element => {
    element.addEventListener("click", (event) => {
      toggleGroup(event);
    });
  });

.temp-percent[data-toggleme="on"] {
  border: solid green 2px;
  background-color: #00FF0011;
}

.temp-percent[data-toggleme="off"] {
  border: solid red 2px;
  background-color: #FF000011;
}

<table class="hour-section">
  <tbody>
    <tr>
      <td>
        <div class="info-group">
          <div class="label">Monday</div>
          <div>12 AM</div>
        </div>
      </td>
      <td>
        <img src="icons/sun.svg" class="weather-icon">
      </td>
      <td>
        <button class="info-group temp-percent" data-toggleme="on">
              <div class="label">Temp</div>
              <div>75&deg;</div>
            </button>
        <button class="info-group temp-percent" data-toggleme="off">
              <div class="label">Chance of Precip</div>
              <div><span data-hour-precip>75</span> %</div>
            </button>
      </td>
      <td>
        <div class="info-group">
          <div class="label">FL Temp</div>
          <div>75&deg;</div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Wind</div>
          <div>7 <span class="value-sub-info">mph</span></div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Precip</div>
          <div>7 <span class="value-sub-info">in</span></div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Dew Point</div>
          <div>50&deg;</div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Humidity</div>
          <div>
            <span data-hour-humidity>75</span>
            <span class="value-sub-info">%</span>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="info-group">
          <div class="label">Monday</div>
          <div>12 AM</div>
        </div>
      </td>
      <td>
        <img src="icons/sun.svg" class="weather-icon">
      </td>
      <td>
        <button class="info-group temp-percent" data-toggleme="on">
            <div class="label">Temp</div>
             <div>75&deg;</div>
        </button>
        <button class="info-group temp-percent" data-toggleme="off">
              <div class="label">Chance of Precip</div>
              <div><span data-hour-precip>75</span> %</div>
            </button>
      </td>
      <td>
        <div class="info-group">
          <div class="label">FL Temp</div>
          <div>75&deg;</div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Wind</div>
          <div>7 <span class="value-sub-info">mph</span></div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Precip</div>
          <div>7 <span class="value-sub-info">in</span></div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Dew Point</div>
          <div>50&deg;</div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Humidity</div>
          <div>
            <span data-hour-humidity>75</span>
            <span class="value-sub-info">%</span>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="info-group">
          <div class="label">Monday</div>
          <div>12 AM</div>
        </div>
      </td>
      <td>
        <img src="icons/sun.svg" class="weather-icon">
      </td>
      <td>
        <button class="info-group temp-percent" data-toggleme="on">
              <div class="label">Temp</div>
              <div>75&deg;</div>
            </button>
        <button class="info-group temp-percent" data-toggleme="off">
              <div class="label">Chance of Precip</div>
              <div><span data-hour-precip>75</span> %</div>
            </button>
      </td>
      <td>
        <div class="info-group">
          <div class="label">FL Temp</div>
          <div>75&deg;</div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Wind</div>
          <div>7 <span class="value-sub-info">mph</span></div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Precip</div>
          <div>7 <span class="value-sub-info">in</span></div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Dew Point</div>
          <div>50&deg;</div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Humidity</div>
          <div>
            <span data-hour-humidity>75</span>
            <span class="value-sub-info">%</span>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="info-group">
          <div class="label">Monday</div>
          <div>12 AM</div>
        </div>
      </td>
      <td>
        <img src="icons/sun.svg" class="weather-icon">
      </td>
      <td>
        <button class="info-group temp-percent" data-toggleme="on">
              <div class="label">Temp</div>
              <div>75&deg;</div>
            </button>
        <button class="info-group temp-percent" data-toggleme="off">
              <div class="label">Chance of Precip</div>
              <div><span data-hour-precip>75</span> %</div>
            </button>
      </td>
      <td>
        <div class="info-group">
          <div class="label">FL Temp</div>
          <div>75&deg;</div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Wind</div>
          <div>7 <span class="value-sub-info">mph</span></div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Precip</div>
          <div>7 <span class="value-sub-info">in</span></div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Dew Point</div>
          <div>50&deg;</div>
        </div>
      </td>
      <td>
        <div class="info-group">
          <div class="label">Humidity</div>
          <div>
            <span data-hour-humidity>75</span>
            <span class="value-sub-info">%</span>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Please signup or login to give your own answer.

Click here to cancel reply.

toggle buttons in each table row using JS – Javascript

Answers