How to add class on disignated content div

r1c04111995 0
Viewed 29

can anyone help me how can I accomplish this, My goal is if I click the buttons it will addClass on the designated content. For example, if I clicked the 1st button it should add a class on the 1st content and if I clicked the 2nd button it will add a class on the 2nd content. Currently, it's only adding on the 1st child because I've set it to [0] on my JS. Thank you and looking forward to your help. Just learning JS

const btns = document.querySelectorAll(".btn")
const content = document.querySelectorAll(".content")
btns.forEach(btn => {
  btn.addEventListener("click", (e)=> {
      const container = e.currentTarget.parentElement.parentElement.children[1].children[0]
      container.classList.toggle("addClass")
  })
})
.main-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn {
  background: blue;
  width: 100px;
  margin-bottom: 10px;
  text-align: center;
  padding: 5px;
  border-radius: 3px;
  color: #ffffff;
  letter-spacing:1px;
  font-weight: 100;
}

.content {
  background: green;
  width: 300px;
  padding: 5px;
  border-radius: 3px;
  color: #ffffff;
    margin-bottom: 10px;
}


.content.addClass {
  background: red;
}
<div class="main-container">
  <div class="btn-container">
      <div class="btn first">Button</div>
      <div class="btn second">Button</div>
      <div class="btn third">Button</div>
      <div class="btn fourth">Button</div>
  </div>
  <div class="content-container">
      <div class="content">Content</div>
      <div class="content">Content</div>
      <div class="content">Content</div>
      <div class="content">Content</div>
  </div>
</div>

javascript
4 Answers

Just get the index from forEach callback and get the element with the index in the .content-container element, and toggle the class

const btns = document.querySelectorAll(".btn")
const content = document.querySelectorAll(".content")
const contentContainer = document.querySelector('.content-container');

btns.forEach((btn, index) => {
  btn.addEventListener("click", (e)=> {
      const container = contentContainer.children[index]
      container.classList.toggle("addClass")
  })
})
.main-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn {
  background: blue;
  width: 100px;
  margin-bottom: 10px;
  text-align: center;
  padding: 5px;
  border-radius: 3px;
  color: #ffffff;
  letter-spacing:1px;
  font-weight: 100;
}

.content {
  background: green;
  width: 300px;
  padding: 5px;
  border-radius: 3px;
  color: #ffffff;
    margin-bottom: 10px;
}


.content.addClass {
  background: red;
}
<div class="main-container">
  <div class="btn-container">
      <div class="btn first">Button</div>
      <div class="btn second">Button</div>
      <div class="btn third">Button</div>
      <div class="btn fourth">Button</div>
  </div>
  <div class="content-container">
      <div class="content">Content</div>
      <div class="content">Content</div>
      <div class="content">Content</div>
      <div class="content">Content</div>
  </div>
</div>

userYBSN0

I strongly suggest you delegate from the button container and use data attributes to find the content

I added a remove and toggle

const contents = document.querySelectorAll(".content")
document.querySelector(".btn-container").addEventListener("click", (e) => {
  const tgt = e.target;
  const chosen = document.getElementById(tgt.dataset.id);
  contents.forEach(content => {
    if (content !== chosen) content.classList.remove("addClass")
  })
  chosen.classList.toggle("addClass")
})
.main-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn {
  background: blue;
  width: 100px;
  margin-bottom: 10px;
  text-align: center;
  padding: 5px;
  border-radius: 3px;
  color: #ffffff;
  letter-spacing: 1px;
  font-weight: 100;
}

.content {
  background: green;
  width: 300px;
  padding: 5px;
  border-radius: 3px;
  color: #ffffff;
  margin-bottom: 10px;
}

.content.addClass {
  background: red;
}
<div class="main-container">
  <div class="btn-container">
    <div class="btn" data-id="first">Button</div>
    <div class="btn" data-id="second">Button</div>
    <div class="btn" data-id="third">Button</div>
    <div class="btn" data-id="fourth">Button</div>
  </div>
  <div class="content-container">
    <div class="content" id="first">Content</div>
    <div class="content" id="second">Content</div>
    <div class="content" id="third">Content</div>
    <div class="content" id="fourth">Content</div>
  </div>
</div>

mplungjan0 

const btns = document.querySelectorAll(".btn")
const content = document.querySelectorAll(".content")
btns.forEach(btn => {
  btn.addEventListener("click", (e) => {
    let id = e.target.getAttribute('data-id');
    let container = content[id];
    container.classList.toggle("addClass")
  })
})
.main-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn {
  background: blue;
  width: 100px;
  margin-bottom: 10px;
  text-align: center;
  padding: 5px;
  border-radius: 3px;
  color: #ffffff;
  letter-spacing:1px;
  font-weight: 100;
}

.content {
  background: green;
  width: 300px;
  padding: 5px;
  border-radius: 3px;
  color: #ffffff;
    margin-bottom: 10px;
}


.content.addClass {
  background: red;
}
<div class="main-container">
  <div class="btn-container">
    <div class="btn" data-id="0">Button</div>
    <div class="btn" data-id="1">Button</div>
    <div class="btn" data-id="2">Button</div>
    <div class="btn" data-id="3">Button</div>
  </div>
  <div class="content-container">
    <div class="content" data-id="0">Content</div>
    <div class="content" data-id="1">Content</div>
    <div class="content" data-id="2">Content</div>
    <div class="content" data-id="3">Content</div>
  </div>
</div>

You can try this one also

DCodeMania0

I also add a forEach for my content so when I tried click the other button it will remove the existing class that I added and add it on the btn that designated the other content

const btns = document.querySelectorAll(".btn")
const content = document.querySelectorAll(".content")

btns.forEach((btn, index) => {
  btn.addEventListener("click", (e)=> {
      const container = e.currentTarget.parentElement.parentElement.children[1].children[index]
      //remove class
      content.forEach((item, indexItem) => {
        if(index !== indexItem) {
            item.classList.remove("addClass")
        }
      })
      
      container.classList.toggle("addClass")
  })
})
.main-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn {
  background: blue;
  width: 100px;
  margin-bottom: 10px;
  text-align: center;
  padding: 5px;
  border-radius: 3px;
  color: #ffffff;
  letter-spacing: 1px;
  font-weight: 100;
}

.content {
  background: green;
  width: 300px;
  padding: 5px;
  border-radius: 3px;
  color: #ffffff;
  margin-bottom: 10px;
}

.content.addClass {
  background: red;
}
<div class="main-container">
  <div class="btn-container">
    <div class="btn" data-id="first">Button</div>
    <div class="btn" data-id="second">Button</div>
    <div class="btn" data-id="third">Button</div>
    <div class="btn" data-id="fourth">Button</div>
  </div>
  <div class="content-container">
    <div class="content" id="first">Content</div>
    <div class="content" id="second">Content</div>
    <div class="content" id="third">Content</div>
    <div class="content" id="fourth">Content</div>
  </div>
</div>

r1c041119950
Related