JavaScript forEach loop - trouble with specific element

Question

I'm trying to loop through some elements with an attribute and based on which element I click, I'd like the is-active class to be added to the specific element.

The top section works, clicking on the specific tab, but the problem is with tabBody.

Right now, it adds the class to ALL elements and I cannot figure out where to put this to reference the correct div.

I just want whichever tab-body is active, to be the same tabs-bg is active, and have all that based on which tab is clicked.

I have this code (I've tried let el = this, says already defined):

const tab = document.querySelectorAll('[data-tabs-tab]');
const tabBody = document.querySelectorAll('[data-tabs-body]');

function changeMe() {
  const activeTab = this.hasAttribute('data-tabs-tab');

  [...tab].forEach(el => {
    if (this !== el) {
      el.classList.remove('is-active');
    }
  });
  this.classList.add('is-active');

  [...tabBody].forEach(el => {
    if (el.hasAttribute('data-tabs-body') == activeTab) {
      if (el.classList.contains('tabs-bg')) {
        el.classList.add('is-active');
      }
    } else {
      el.classList.remove('is-active');
    }
  });
}
tab.forEach(el => el.addEventListener('click', changeMe));

<div class="tabs" data-tabs>
  <nav>
    <ul class="tabs__tabs">
      <li data-tabs-tab="one" class="is-active"></li>
      <li data-tabs-tab="two"></li>
      <li data-tabs-tab="three"></li>
    </ul>
  </nav>
  <div class="tabs__content">
    <div data-tabs-body="one" class="tab-body is-active"></div>
    <div data-tabs-body="two" class="tab-body"></div>
    <div data-tabs-body="three" class="tab-body"></div>
  </div>
</div>
<div class="tabs__bg">
  <div data-tabs-body="one" class="tabs-bg is-active"></div>
  <div data-tabs-body="two" class="tabs-bg"></div>
  <div data-tabs-body="three" class="tabs-bg"></div>
</div>

Your snippet is not working.

Mark Baijens
– Mark Baijens

2018-06-19 14:06:29 +00:00
Commented Jun 19, 2018 at 14:06 — Mark Baijens
– Mark Baijens, Commented Jun 19, 2018 at 14:06

Joseph Marikle · Accepted Answer · 2018-06-19 14:06:52Z

3

.hasAttribute() just checks to see if the attribute exists on the element. You should be using .getAttribute() instead to get the value of the attribute.

Also, not sure why the if (el.classList.contains('tabs-bg')) block was in there, but I commented it out to make the demo work.

const tab = document.querySelectorAll('[data-tabs-tab]');
const tabBody = document.querySelectorAll('[data-tabs-body]');

function changeMe() {
  const activeTab = this.getAttribute('data-tabs-tab'); // Change here

  [...tab].forEach(el => {
    if (this !== el) {
      el.classList.remove('is-active');
    }
  });
  this.classList.add('is-active');

  [...tabBody].forEach(el => {
    if (el.getAttribute('data-tabs-body') === activeTab) { // and here
      //if (el.classList.contains('tabs-bg')) {
        el.classList.add('is-active');
      //}
    } else {
      el.classList.remove('is-active');
    }
  });
}
tab.forEach(el => el.addEventListener('click', changeMe));

.is-active {color: red;}

<div class="tabs" data-tabs>
  <nav>
    <ul class="tabs__tabs">
      <li data-tabs-tab="one" class="is-active">Tab 1</li>
      <li data-tabs-tab="two">Tab 2</li>
      <li data-tabs-tab="three">Tab 3</li>
    </ul>
  </nav>
  <div class="tabs__content">
    <div data-tabs-body="one" class="tab-body is-active">Tab Body Content 1</div>
    <div data-tabs-body="two" class="tab-body">Tab Body Content 2</div>
    <div data-tabs-body="three" class="tab-body">Tab Body Content 3</div>
  </div>
</div>
<div class="tabs__bg">
  <div data-tabs-body="one" class="tabs-bg is-active">Tab Body BG 1</div>
  <div data-tabs-body="two" class="tabs-bg">Tab Body BG 2</div>
  <div data-tabs-body="three" class="tabs-bg">Tab Body BG 3</div>
</div>

answered Jun 19, 2018 at 14:06

Joseph Marikle

78.8k18 gold badges114 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

fencepencil Over a year ago

Thank you so much, Joseph! It's working perfectly now :) and thanks for the hasAttribute vs. getAttribute tip!

kumarharsh Over a year ago

@fencepencil just a side note: you can use Array.prototype.forEach.call(tab, (el) => {}) and bypass creating a new array on each changeMe() call.

Collectives™ on Stack Overflow

JavaScript forEach loop - trouble with specific element

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related