javascript - 更改输入字段颜色(如果已填充)

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";
        }   

    }
}

问题是，如果至少有一个字段获得字段，则所有 字段的颜色会变为绿色。一旦它们是绿色的，它就永远不会变成红色，即使我删除了所有的输入。我怀疑脚本将绿色属性放在类上，而不是单个元素上。修复它的最佳方法是什么？

Answer 1

想通过使用 css 来做到这一点。这对我有用。

 input:not([value = ""]){
        background-color: black;
        color: white;
    }