I want to add forEach so that I can active each & everydiv separately

Question

I have a section & it's reaction section with love, comment & share option. so I want to add toggle Class whenever I click on love button or comment button and I make it

but the problem is I copy this section for multiple time then it's not work, I use try to use foreach, but it's not work. I want it link no matter how many same section on my page, if I click any of this button, the toggle things work

this is the code I use , it's the HTML code

this is the code

document.querySelector(".lverct").addEventListener("click", () => {
  document.querySelector(".lverct").classList.toggle("kp");
});
document.querySelector(".cmnt").addEventListener("click", () => {
  document.querySelector(".cmnt").classList.toggle("kp");
});
document.querySelector(".Share").addEventListener("click", () => {
  document.querySelector(".Share").classList.toggle("kp");
});
document.querySelector(".lverct1").addEventListener("click", () => {
  document.querySelector(".lverct1").classList.toggle("kp");
});
document.querySelector(".cmnt1").addEventListener("click", () => {
  document.querySelector(".cmnt1").classList.toggle("kp");
});
document.querySelector(".Share1").addEventListener("click", () => {
  document.querySelector(".Share1").classList.toggle("kp");
});

.pstfeedbackbtn{
margin:10px 20px;
display:flex;
gap:10px;
}
.dflx{
cursor:pointer;
}

.lverct.kp button{
background:crimson;
}
.lverct1.kp button{
background:crimson;
}


.cmnt.kp button{
background:green;
}
.cmnt1.kp button{
background:green;
}


.Share.kp button{
background:orange;
}
.Share1.kp button{
background:orange;
}

                    <div class="pstfeedbackbtn">
                      <div class="dflx lverct ">
                        <button>Like</button>
                      </div>
                      <div class="dflx cmnt ">
                        <button>Comment</button>
                      </div>
                      <div class="dflx Share ">
                       <button>Share</button>
                      </div>
                    </div> 
                    <div class="pstfeedbackbtn">
                      <div class="dflx lverct lverct1">
                       <button>Like</button>
                      </div>
                      <div class="dflx cmnt cmnt1">
                         <button>Comment</button>
                      </div>
                      <div class="dflx Share Share1">
                      <button>Share</button>
                      </div>
                    </div>

I don't want to make it like this, I want to make it like a for-each functionality so that no matter how many same section I have, I'll work for everyone

Use [event delegation](//developer.mozilla.org/en/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation) instead of adding several event listeners — it’s more maintainable and applies to dynamically added elements. See [the tag info](/tags/event-delegation/info) and [this Q&A](/q/1687296/4642212). Note that `".lverct, .cmnt, .Share, .lverct1, .cmnt1, .Share1"` is the selector for all your elements. — Sebastian Simon, Nov 01 '22 at 18:40

symlink · Answer 1 · 2022-11-01T19:07:04.240

You can get all three button types with the selector .dflx > button in a querySelectorAll, then loop through them and use e.target.parentElement to get the div to toggle the class on.

Since you're now attaching the click events to button, e.target.parentElement will always find the .dflx div, as long as the HTML structure doesn't change (see event bubbling and capturing). It's in my opinion a little cleaner since the button element is what the user is intending to click:

Array.from(document.querySelectorAll(".dflx > button")).forEach(el => {
  el.addEventListener("click", (e) => {
    e.target.parentElement.classList.toggle("kp");
  });
});

.pstfeedbackbtn {
  margin: 10px 20px;
  display: flex;
  gap: 10px;
}

.dflx {
  cursor: pointer;
}

.lverct.kp button {
  background: crimson;
}

.cmnt.kp button {
  background: green;
}

.Share.kp button {
  background: orange;
}

<div class="pstfeedbackbtn">
  <div class="dflx lverct ">
    <button>Like</button>
  </div>
  <div class="dflx cmnt ">
    <button>Comment</button>
  </div>
  <div class="dflx Share ">
    <button>Share</button>
  </div>
</div>
<div class="pstfeedbackbtn">
  <div class="dflx lverct lverct1">
    <button>Like</button>
  </div>
  <div class="dflx cmnt cmnt1">
    <button>Comment</button>
  </div>
  <div class="dflx Share Share1">
    <button>Share</button>
  </div>
</div>

I want to add forEach so that I can active each & everydiv separately

1 Answers1