JavaScript getElementByID - JavaScript 代码中的错误（字段留空但点击时未变为红色）

Question

我有以下 JavaScript 代码，看起来是正确的。

我只想在单击按钮时，让文本框的背景变成 'red'，如果文本框留空的话。

谁能指出下面代码中的错误。

function validate(){
  if (document.getElementById("textbox_1").value==' '){
    document.getElementById("textbox_1").style.backgroundColor='red'; 
  }
}

<body>
   NAME:<INPUT TYPE="Text" SIZE="15" VALUE="" ID="textbox_1" />
   <INPUT TYPE="Button" VALUE="SEND" onClick="Validate()" />
</body>

Answer 1

Uppercase/Lowercase 很重要（在函数名称中）。您还应该比较空字符串而不是空白 space:

<script>
  function validate(){
    var el = document.getElementById("textbox_1");
    if (el.value.trim()==''){
      el.style.backgroundColor='red'; 
    }
    else{
      el.style.backgroundColor=''; 
    }
  }
</script>
NAME:<INPUT TYPE="Text" SIZE="15" VALUE="" ID="textbox_1">
<INPUT TYPE="Button" VALUE="SEND" onClick="validate()">

Answer 2

你写错了函数名

function validate(){
if (document.getElementById("textbox_1").value=='')
    document.getElementById("textbox_1").style.backgroundColor='red';   
}

NAME:<input type="Text" size="15" value="" id="textbox_1">
<input type="Button" value="SEND" onClick="validate()">

Answer 3

函数名将不被验证 Validate.Html 大写函数名 Validate/Lower 在验证 JS 时

function validate(){
if (document.getElementById("textbox_1").value==''){
    document.getElementById("textbox_1").style.backgroundColor='red';   
}

}

<!DOCTYPE HTML>
<HTML>
<head>

</head>
<body>
NAME:<INPUT TYPE="Text" SIZE="15" VALUE="" ID="textbox_1">
<INPUT TYPE="Button" VALUE="SEND" onClick="validate()">
</body>
</html>

JavaScript getElementByID - JavaScript 代码中的错误（字段留空但点击时未变为红色）

JavaScript getElementByID - error in JavaScript code (field is left blank but not turning red on click)

javascript

textbox

button

getelementbyid