How to select the content from the element that I clicked on (using data attributes)

Question

I am working with HTML and JS and I am trying to add a click event listener so that the index = 0 value updates automatically on click.

Depending on which .tab element I click, the content inside of the div.tab should change to display either Hello1, Hello2 or Hello3. The first tab should display the tab content hello1 accordingly.

I have provided both with data attributes in the HTML. I want the corresponding div.tab content to be output if both have the same data attribute with vanilla JS.

JS

const tabbarContent = document.querySelectorAll(".tab-content");
const tabbarButtons = document.querySelectorAll(".tab");
const index = 0;
tabbarContent[index].classList.add('active');
tabbarButtons[index].classList.add('active');
const dataAttribute1 = tabbarButtons[index].getAttribute("data-tab");
const dataAttribute2 = tabbarContent[index].getAttribute("data-tab");



function clickTab() {
  for (let index = 0; index.length; index++) {
    if (dataAttribute1[index] === dataAttribute2[index]) {
      dataAttribute2.classList.add("active");
    }
  }
}

tabbarButtons[index].addEventListener("click", clickTab);

HTML

Thanks Jessy

user_14201528 · Answer

If I understand correctly what you want to achieve, you could do something like:

const tabbarButtons = document.querySelectorAll(".tab");
const tabbarContents = document.querySelectorAll(".tab-content");

tabbarButtons.forEach((tabBtn) => {
  tabBtn.addEventListener('click', () => {
    tabbarContents.forEach(tabCnt => {
      if (tabCnt.dataset.tab === tabBtn.dataset.tab) {
        tabCnt.classList.add('active');
      } else {
        tabCnt.classList.remove('active');
      }
    })
  });
})

.tab {
  display: inline-block;
  padding: 5px;
  border: 1px solid #ccc;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

How to select the content from the element that I clicked on (using data attributes)

1 Answers