Как применить JavaScript к нескольким группам кнопок

Question

У меня есть css и js в группе кнопок, поэтому при нажатии кнопки из группы она отображается как активная, а при нажатии другой кнопки эта кнопка становится активной, а остальные очищаются. У меня должно быть 22 из этих групп кнопок (я поставил только 2 здесь ради экономии места) на моей странице, когда у меня есть только одна, код работает, но когда я добавляю другие, все рушится, кто-нибудь может помочь! Как использовать сценарий несколько раз, когда сценарий применяется к каждой группе и не влияет на другие.

function codeAddress() {
  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";
    });
  }
}
window.onload = codeAddress;

.btn {
  background-color: white;
  border: 3px solid #0099ff;
  color: #0099ff;
  cursor: pointer;
  float: left;
  padding: 10px 16px;
  font-size: 18px;
}

.active,
.btn:hover {
  background-color: #0099ff;
  color: white;
  border: 3px solid #0099ff;
  cursor: pointer;
}

<div id="myDIV">
  <button class="btn active">GQL</button>
  <button class="btn">PSV</button>
  <button class="btn">WT2</button>
  <button class="btn">NBV</button>
  <button class="btn">MBD</button>
</div>
<div id="myDIV">
  <button class="btn active">GQL</button>
  <button class="btn">PSV</button>
  <button class="btn">WT2</button>
  <button class="btn">NBV</button>
  <button class="btn">MBD</button>
</div>

Answer 1

Вот дай это назад. Я считаю, что это ожидаемый ответ, который вы ожидаете при нажатии кнопки из разных групп. Что-то вроде радио кнопок. Как уже упоминалось, идентификатор может представлять только один элемент, а не несколько. Используйте класс вместо. Поэтому я изменил ваш идентификатор на класс btn-group.

function codeAddress() {
    const btnClick = function () {
        this.parentNode.getElementsByClassName("active")[0].classList.remove("active");
        this.classList.add("active");
    };
    document.querySelectorAll(".btn-group .btn").forEach(btn => btn.addEventListener('click', btnClick));

    // This is the same as above just another way of doing it. use which ever you like
    // var btns = document.querySelectorAll(".btn-group .btn");
    // for (var i = 0; i < btns.length; i++) {
    //     btns[i].addEventListener("click", function () {
    //         this.parentNode.getElementsByClassName("active")[0].classList.remove("active");
    //         this.classList.add("active");
    //     });
    // }
   
}
window.onload = codeAddress;

.btn {
    background-color: white;
    border: 3px solid #0099ff;
    color: #0099ff;
    cursor: pointer;
    float: left;
    padding: 10px 16px;
    font-size: 18px;
}

.active,
.btn:hover {
    background-color: #0099ff;
    color: white;
    border: 3px solid #0099ff;
    cursor: pointer;
}

<div class="btn-group">
    <button class="btn active">GQL</button>
    <button class="btn">PSV</button>
    <button class="btn">WT2</button>
    <button class="btn">NBV</button>
    <button class="btn">MBD</button>
</div>
<br style="clear:both">
<div class="btn-group">
    <button class="btn active">GQL</button>
    <button class="btn">PSV</button>
    <button class="btn">WT2</button>
    <button class="btn">NBV</button>
    <button class="btn">MBD</button>
</div>

Answer 2

Это довольно просто сделать всего за 3 шага.

// First step is to create a onBtnClick handler function:
// The btn which was clicked can be accessed from event.target
// And then we can use the build in function classList.toggle to toggle the active class on that btn
const onBtnClickHandler = function (ev){ev.target.classList.toggle("active")};

// Next step is to find all btns, this can be done using the build in querySelectorAll function
const btns = document.querySelectorAll('.btn'); //returns NodeList array

// Last step is to add the eventListener callback function to each btn
btns.forEach(btn => btn.addEventListener('click', onBtnClickHandler));

Надеюсь, это поможет.

Answer 3

Вместо отдельных кнопок я бы порекомендовал использовать переключатели для чего-то подобного. Он уже имеет встроенную функциональность для группировки вместе для выбора, аналогичного тому, что вы собираетесь. Тогда вам просто нужно использовать встроенные команды для установки активной кнопки или проверки значений.

https://www.w3schools.com/jsref/prop_radio_checked.asp

https://www.w3schools.com/html/html_forms.asp

Answer 4

Вот пример того, что вам нужно https://jsbin.com/bomegabiqo/1/edit?html,js,output

Прежде всего, я хочу сказать, что вам не нужно иметь два div с одинаковыми id Второй момент заключается в том, что вам необходимо присоединить eventListener к родительскому элементу , что связано с оптимальной практикой и оптимизацией производительности (вы можете прочитать об этом где-нибудь)

Итак, вот обновленная версия HTML:

<div id="myGroupButtonsWrapper">  
  <div id="myDIV">
    <button class="btn active">GQL</button>
    <button class="btn">PSV</button>
    <button class="btn">WT2</button>
    <button class="btn">NBV</button>
    <button class="btn">MBD</button>
  </div>
  <div id="myDIVV">
    <button class="btn">GQL</button>
    <button class="btn">PSV</button>
    <button class="btn">WT2</button>
    <button class="btn">NBV</button>
    <button class="btn">MBD</button>
  </div>
</div>

и JavaScript:

function codeAddress() {

  function myClickCallback(e) {
    if (e.target.className === 'btn') {
      var allButtons = document.querySelectorAll("#myGroupButtonsWrapper .btn");

      allButtons.forEach((elem) => {
        elem.className = elem.className.replace(" active", "");           
      });
      e.target.className += ' active';    
    } else {
      return;
    }
  }

  var header = document.getElementById("myGroupButtonsWrapper");   
  header.addEventListener("click", myClickCallback);    
} 
window.onload = codeAddress;

Answer 5

Это не работает, потому что у вас есть несколько идентификаторов:

<div id="myDIV">...</div>
<div id="myDIV">...</div>

Вы не можете сделать это - во-первых, это недопустимый HTML, а во-вторых, с JS будет выполняться одно из двух: причинаошибка, которую вы можете увидеть в консоли, или она будет обрабатывать header как NodeList, который представляет собой набор узлов, соответствующих выбору запроса, что означает, что он не будет работать.Если вы сделаете так, чтобы все они имели разные идентификаторы (например, div1, div2, div3 и т. Д.), Это сработает, если вы измените свой код так, чтобы он принимал несколько divs.
Другой вариант - сделатькласс (например, myDIV) и измените существующий код JavaScript для использования класса.