Warum, wenn Texarea nicht gefüllt wird, einen Stil ändern?

Question

Wenn ich den Knopf drücke, versuche ich die Stile des Textfelds zu ändern, wenn es nicht gefüllt ist. Aber es funktioniert nicht. Ich fange alle Elemente in der Form - Texarea. Aber nachdem dieser Code nicht funktioniert und ich keinen Fehler finden kann. Hilf mir bitte.

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

Sie versuchen, eine Nummer zu einem Array vergleichen:

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

Stattdessen sind Sie suchen:

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