Почему не работает цикл для прохода по кнопкам и удаления их класса?

Question

Основная задумка в том, чтобы при нажатии на какую-то кнопку кнопка нажатая до этого 'потухала'. Но почему-то в итоге я просто кликаю по кнопкам и они поочередно активируются, при этом другие также активны. Я не могу понять, что в коде не так.

JS:

function colorChanger(obj){ 
            let elem = document.getElementsByClassName('btn')
            for (let i; i < elem.length; i++) {
                if (elem[i].classList.contains('active')) {
                    elem[i].remove('active')
                }
            }
            obj.classList.add('active')
        }

HTML:

<body>
    <button onclick="colorChanger(this)" class="btn">Button 1</button>
    <button onclick="colorChanger(this)" class="btn">Button 2</button>
    <button onclick="colorChanger(this)" class="btn">Button 3</button>
    <script src="script.js"></script>
</body>

Answer 1

Пропробуйте так

function colorChanger(obj){ 
            let elem = [...document.getElementsByClassName('btn')]
            for (let i; i < elem.length; i++) {
                if (elem[i].classList.contains('active')) {
                    elem[i].remove('active')
                }
            }
            obj.classList.add('active')
        }

Answer 2

Ошибка была в цикле, я не задал начальное значение i...

for (let i = 0; i < elem.length; i++) {...

А так, все работает как и задумано

БЛОГ НА HUSL

Почему не работает цикл для прохода по кнопкам и удаления их класса?

Ответы (2 шт):