为什么当textarea没有填充，不改变风格？

Question

当我按下按钮时，我试图改变textarea的样式，如果它没有填充。但它不起作用。我抓住了表单中的所有元素 - textarea。但是这段代码不起作用后我找不到错误。

var btnForm = document.getElementById('btn-form');
btnForm.addEventListener('click', function (){
var form = document.getElementById('form');
var elems = form.elements;
var error=document.getElementById('error');
console.log(elems);

  for (var i=0; i < elems; i++){
      var textarea=elems[i];

      console(textarea);
      if (textarea.value==''){
          console.log('fserf');
        textarea.style.border = '2px solid red';
        error.style.display = "block";
      } 
  }
}
);

.form{
    margin-top:30px;
    text-align: center;  
}
.form textarea{
    width: 100%;
    margin-top: 10px;
    border: 1px solid #5dc5ef;
    text-align: right;
    padding-right: 10px;
    resize: none;
}
.form button{
    padding: 10px 80px;    
}
.form-for-users h5{
    margin-top: 20px;
}
#number-light-blue{
    color:#5dc5ef;
    font-size: 2em;
}
.btn-form{

}
#error{
    display: none;
    color:red;
}

<form class="form" id="form">

                    <textarea type="text" class="form-control">:שם</textarea>
                    <textarea type="text" class="form-control">:מייל</textarea>
                    <textarea type="text" class="form-control">:נושא</textarea>
                    <textarea type="text" class="form-control">:הודעה</textarea>
                    <h5 id="error">Please, fill the form!</h5>
                </form>
                <button id="btn-form">שליחה</button>

Answer 1

您正在尝试将数字与数组进行比较：

for (var i=0; i < elems; i++){

相反，你正在寻找：

for (var i=0; i < elems.length; i++){