Изменение цвета поля ввода, если заполнено

Question

У меня есть форма с input элементами:

<form method="POST" action="User.do">
    <div id="buddy-form-group">

          <input type="text"
             class="form-control form-input-field form-interests-input-field" 
             name="interests" 
             onchange="checkFilled()">

     </div>

     <br/><br/><button class="btn btn-success" type="submit">Send</button>
</form>

У меня есть скрипт, который принимает все элементы класса form-interests-input-field и проверяет, являются ли они пустыми.Если он пуст, он устанавливает красный цвет, в противном случае - зеленый:

function checkFilled()  {
    var interests = document.getElementsByClassName("form-interests-input-field");
    for (var i = 0; i<interests.length; i++)  {
        if (interests[i].value = "")  {
            interests[i].style.backgroundColor = "red";
        }
        else  {
            interests[i].style.backgroundColor = "green";
        }   

    }
}

Проблема в том, что цвет полей all меняется на зеленый, если хотя бы одно поле получает поле.Как только они становятся зелеными, они никогда не изменяются на красные, даже если я удалю все введенные данные.Я подозреваю, что скрипт помещает свойство зеленого цвета в класс, а не в отдельный элемент.Как лучше всего это исправить?

Answer 1

Должно работать что-то вроде следующего:

<script>
    function checkFilled()  {
        var interests = document.getElementsByClassName("form-interests-input-field");
        for (var i = 0; i<interests.length; i++)  {
            if (interests[i].value == '')  {
                interests[i].style.backgroundColor = 'red';
            } else {
                interests[i].style.backgroundColor = 'green';
            }   
        }
    }
</script>

<form>
    <div id="buddy-form-group">

          <input type="text"
             class="form-control form-input-field form-interests-input-field" 
             name="interests" 
             onkeyup="checkFilled()">

     </div>

     <br/><br/>
     <button class="btn btn-success" onclick="checkFilled()" type="button">Send</button>
</form>

Изменено = на == в операторе if.

С добавлением onkeyup иonclick полей, он делает то, что вы хотите.Когда вы нажимаете кнопку, он проверяет значение поля ввода и соответственно устанавливает цвет фона.Он также устанавливает цвет фона поля ввода при вводе.