Как сделать добавление класса к input при заполненном value?

Question

[MelPosp]

Есть код, он добавляет класс к input, если value заполнен хоть на 1 букву. И удаляет класс если value = 0
Так вот в чем вопрос: У меня на странице не 1 input, а целая форма, если ко всем input прописать один и тот же класс "ui-field", то скрипт срабатывает только на 1-ый input. А если размножить этот скрипт под каждый input с разными классами (ui-field , ui-field1, ui-field2, ui-field3...), то скрипт вообще перестает работать. Как быть?

<script>     
   var uiField = document.getElementsByClassName('ui-field')[0];
    uiField.addEventListener('keyup', function () {
           
        if (uiField.value.length >= 1) {
            uiField.classList.add('ui-field-active');
        }else{   
            uiField.classList.remove('ui-field-active');
        }
    }) 
	

     </script>

Comments

[Eduard Shkuta]

Срабатывает только на 1 инпут потому, что ты выбрал его в качестве элемента

var uiField = document.getElementsByClassName('ui-field')[0]

[MelPosp]

Эдуард Шкута, Я ничего не выбирал, я взял готовый код в интернете, прощу помочь переделать под все эл-ты

[Максим Ахмеров]

Чувак, смотри, var uiField = document.getElementsByClassName('ui-field')[0];
getElementsByClassName он возвращает массив из элементов, а ты берешь только первый инпут через [0]. попробуй убери [0] и обработчик должен навеситься на все инпуты, я не проверял, но думаю, что заработает

[MelPosp]

Максим Ахмеров, убрав [0] не помогло, перестало даже на 1-ый input работать

[Максим Ахмеров]

MelPosp, да, тупанул, тебе надо перебрать uiField и на каждый навесить обработчик
const elements = document.getElementsByClassName('ui-field');
for(let a = 0; a < elements.length; a++ ) {
let uiField = elements[a];
uiField.addEventListener('keyup', function () {

if (uiField.value.length >= 1) {
uiField.classList.add('ui-field-active');
}else{
uiField.classList.remove('ui-field-active');
}
})
}

[MelPosp]

Максим Ахмеров, Спасибо работает