填写第一个文本框后的Javascript按钮submit不会更改下一个文本框的颜色

我以前在这里找到过帮助，我对一般的编码是完全陌生的。我正在编写一个Javascript脚本，以在插入文本时更改颜色。当有文本时，第一个变为红色。我想让他们都变成红色。当它们被填满时，它们必须一个接一个地变蓝。我已经为此使用了if语句。我应该看看另一种方法吗

function btnSubmit(input) {
    var name = document.getElementById('name');
    var email = document.getElementById('email');
    var message = document.getElementById('message');

    if (name.value == '') {

      name.style.borderColor = 'red';
      return false;

      // stop submission until textbox is not ''
    }else{
      name.style.borderColor = 'blue';
      return false;
    }

    if (email.value == '') {
      email.style.borderColor = 'red';
      return false;
    }else{
      email.style.borderColor = 'blue';
      return false;
    }

    if (message.value == '') {
      message.style.borderColor = 'red';
      return false;
    }else{
      message.style.borderColor = 'blue';
      return false;
    }

    if (name.value != '' && email.value != '' && message.value != ''){
      alert('all fields filled in');
      return true;
    }
} 

---

在else语句中不应返回false，return语句停止函数执行，return语句之后的所有行都不会执行。在代码中，函数btnSubmit将始终检查name字段，因为在if和else条件下都有返回

你的代码应该是

function btnSubmit(input) {
    var name = document.getElementById('name');
    var email = document.getElementById('email');
    var message = document.getElementById('message');

    if (name.value == '') {

      name.style.borderColor = 'red';
      return false;
    }else{
      name.style.borderColor = 'blue';
    }

    if (email.value == '') {
      email.style.borderColor = 'red';
      return false;
    }else{
      email.style.borderColor = 'blue';
    }

    if (message.value == '') {
      message.style.borderColor = 'red';
      return false;
    }else{
      message.style.borderColor = 'blue';
    }

    // No need to add this condition as you have already checked all three fields individually
    //if (name.value != '' && email.value != '' && message.value != ''){
      alert('all fields filled in');
      return true;
    //}
}

---

我将向您展示一个示例，如何迭代所有

输入

标记，并根据内容对它们应用蓝色或红色样式。这是一种比在函数中声明每个输入更合适的方法。我认为这是一个很好的起点，因此您需要稍微修改此代码以获得您想要的：

函数btnSubmit（输入）{
var inputs=document.getElementsByTagName（'input'）
var计数器=0；
对于（变量i=0；i

提交

var name=document.getElementById（'name'）；
var email=document.getElementById（'email'）；
var message=document.getElementById（'message'）；
var输入=[姓名、电子邮件、消息]；
输入。forEach（函数（输入）{
input.addEventListener（“更改”，检查）；
input.addEventListener（'focusout'，check）；
});
函数检查（）{
if（this.value.length==0）{
输入。forEach（函数（el）{
如果（el.value.length==0）el.style.borderColor='red'
});
}否则{
this.style.borderColor='blue'；
}
}

Error:{“message”：“uncaughttypeerror:input.addEventListener不是函数”，“filename”：“lineno”：22，“colno”：9}