Не каждый класс элемента обновляется при итерации по массиву элементов в Javascript

Question

У меня есть простая функция JavaScript, которая должна изменять класс и, следовательно, цвет 4 кнопок при нажатии.Они не все меняются при первом нажатии кнопки «Нажми меня» - только цвета для кнопок 1 и 3 меняются на красный.Снова нажмите кнопку «Нажми меня», затем изменит цвет кнопки2, а после очередного нажатия кнопки4 обновится.

<style>
    .button {
        background-color: green;
    }

    .updatedButton {
        background-color: red;
        color: white;
    }
</style>

<script>
    function changeColor() {
        var elems = document.getElementsByClassName("button");
        for (var i=0; i<elems.length; i++) {
            console.log(JSON.stringify(elems[i].getAttribute('id')));
            elems[i].classList.add('updatedButton');
            elems[i].classList.remove('button');
        }
    }
</script>

<button id="button1" class="button">a</button>
<button id="button2" class="button">b</button>
<button id="button3" class="button">c</button>
<button id="button4" class="button">d</button>
<button onclick="changeColor()">Click me</button>

Я зарегистрировал в консоли идентификатор элементов, которые были внутри цикла, и это то, что я получил, показывая, что обновляются только определенные кнопки.

Первый щелчок: "button1«(15: 16: 52: 545)« button3 »(15: 16: 52: 547)

Второй щелчок:« button2 »(15: 16: 55: 981)

Третийclick: "button4" (15: 16: 58: 841)

Я попытался перезагрузить страницу, но поведение не изменилось.Кто-нибудь может объяснить, почему это происходит вместо того, чтобы каждая кнопка меняла цвет при первом нажатии кнопки?

Answer 1

Как уже говорили другие, вам нужно использовать querySelctorAll.Проверьте это jsfiddle.

http://jsfiddle.net/ekcLbwur/11/

    function changeColor() {
        let elems = document.querySelectorAll(".button");
        for (let i=0; i<elems.length; i++) {
            elems[i].classList.add('updatedButton');
            elems[i].classList.remove('button');
        }
    }
window.onload = function() {
    document.getElementById("button5").onclick = changeColor;
};

Также для справки лучше использовать let вместо var.Кроме того, лучше изменить в JS такие вещи, как onClick, чем HTML.

Answer 2

getElementsByClassName возвращает текущую коллекцию, которая немедленно изменяется при удалении класса.Используйте querySelectorAll вместо.

function changeColor() {
  var elems = document.querySelectorAll(".button");
  for (var i = 0; i < elems.length; i++) {
    console.log(JSON.stringify(elems[i].getAttribute('id')));
    elems[i].classList.add('updatedButton');
    elems[i].classList.remove('button');
  }
}

.button {
  background-color: green;
}

.updatedButton {
  background-color: red;
  color: white;
}

<button id="button1" class="button">a</button>
<button id="button2" class="button">b</button>
<button id="button3" class="button">c</button>
<button id="button4" class="button">d</button>
<button onclick="changeColor()">Click me</button>

Answer 3

Попробуйте включить все кнопки внутри одного делителя и назначьте для него класс, затем выберите все кнопки внутри этого класса и измените цвет для всех выбранных кнопок!

Answer 4

getElementsByClassName() возвращает live HTMLCollection, что означает, что как только вы удалите класс button, он больше не будет в коллекции.

Чтобы предотвратить это, создайтеизначально мелкая копия в массиве:

var elems = [...document.getElementsByClassName("button")];

В зависимости от того, что поддерживает ваша среда сборки, вы также можете использовать Array.from:

var elems = Array.from(document.getElementsByClassName("button"));