display current button of multiple set of buttons

Issue

I have a set of buttons where a js code selected the current button to display it differently.

What I would like to do is to have two sets of buttons, in which I can interact with the buttons in the different sets independently.

Like select the button “1” on the first set and “2” on the second set. In a perfect world, I would like to have only one function in js to do it for different sets. I don’t know how to do it.

My one set of button is like this :

// Add active class to the current button (highlight it)
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
  var current = document.getElementsByClassName("active");
  current[0].className = current[0].className.replace(" active", "");
  this.className += " active";
  });
}
.btn {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
  font-size: 18px;
}

/* Style the active class, and buttons on mouse-over */
.active, .btn:hover {
  background-color: #666;
  color: white;
}
<div id="myDIV">
  <button class="btn">1</button>
  <button class="btn active">2</button>
  <button class="btn">3</button>
  <button class="btn">4</button>
  <button class="btn">5</button>
</div>

Solution

Your question is not clear about what you want, but I guess this is what you want, I added another button in the following snippet, I change few things:

  1. Remove the selector based on the ID and replace it with selector for class name document.querySelectorAll(".button-set") via querySelectorAll()
  2. Loop though the button set (2 element in my snippet), and change the selector of the button for active class to the current div id since it is unique and allow us to target a specific set.
  3. Add unique ID value for div group or set.
var sets = document.querySelectorAll(".button-set");

sets.forEach((el, i) => {
  btns = el.getElementsByClassName("btn");
  for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function() {
      var button = document.querySelector(`#${el.id} .active`);
      button.className = button.className.replace(" active", "");
      this.className += " active";
    });
  }
});
.btn {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
  font-size: 18px;
}

/* Style the active class, and buttons on mouse-over */
.active, .btn:hover {
  background-color: #666;
  color: white;
}
<div id="myDIV" class="button-set">
  <button class="btn">1</button>
  <button class="btn active">2</button>
  <button class="btn">3</button>
  <button class="btn">4</button>
  <button class="btn">5</button>
</div>
<br />
<div id="myDIV2" class="button-set">
  <button class="btn">1</button>
  <button class="btn active">2</button>
  <button class="btn">3</button>
  <button class="btn">4</button>
  <button class="btn">5</button>
</div>

Answered By – ROOT

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published