为什么当textarea没有填充时,不会改变风格?

时间:2017-10-13 16:18:58

标签: javascript html css textarea

当我按下按钮时,如果没有填充,我正在尝试更改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";
      } 
  }
}
);
&#13;
.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;
}
&#13;
<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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

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

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

相反,您正在寻找:

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