爲什麼當texarea不填充時，是否改變風格？

Question

當我按下按鈕時，如果未填充，我正在嘗試更改textarea的樣式。但它不起作用。我捕獲了表單中的所有元素 - texarea。但是在這段代碼不起作用之後，我找不到一個錯誤。請幫幫我。

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++){