我在处理这段JavaScript代码时遇到了麻烦，它的作用是在文本输入框为空时更改其背景颜色。
以下是代码：
function checkFilled() {
var inputVal = document.getElementById("subEmail").value;
if (inputVal == "") {
inputVal.style.backgroundColor = "yellow";
}
}
我期望文本框一开始是黄色的。
演示 --> http://jsfiddle.net/2Xgfr/829/
HTML
<input type="text" id="subEmail" onchange="checkFilled();">
JavaScript
function checkFilled() {
var inputVal = document.getElementById("subEmail");
if (inputVal.value == "") {
inputVal.style.backgroundColor = "yellow";
}
else{
inputVal.style.backgroundColor = "";
}
}
checkFilled();
注意：您正在检查值并将颜色设置为不允许的值，这就是为什么它会给出错误提示。请尝试像上面那样操作。
(Note: 您检查的是值，并将颜色设置为该值，而这是不允许的，因此出现了错误。请尝试按照上述方法操作。)您没有调用该函数，且存在其他错误，应该是：
function checkFilled() {
var inputVal = document.getElementById("subEmail");
if (inputVal.value == "") {
inputVal.style.backgroundColor = "yellow";
}
}
checkFilled();
您之前将inputVal设置为输入框的字符串值，但是您试图在其上设置style.backgroundColor，这是行不通的，因为它是一个字符串，而不是元素。我将您的变量更改为存储元素对象而不是其值。
document.getElementById("subEmail").style.backgroundColor = "yellow";
并且在输入字段更改后，检查是否存在某些值，或者像黄色一样进行着色
function checkFilled() {
var inputVal = document.getElementById("subEmail");
if (inputVal.value == "") {
inputVal.style.backgroundColor = "yellow";
}
}
试试这个：
function checkFilled() {
var inputVal = document.getElementById("subEmail");
if (inputVal == "") {
inputVal.style.backgroundColor = "yellow";
}
}
function checkFilled() {
var inputElem = document.getElementById("subEmail");
if (inputElem.value == "") {
inputElem.style.backgroundColor = "yellow";
}
}
<! DOCTYPE html>
<html>
<head></head>
<body>
<input type="text" id="subEmail">
<script type="text/javascript">
window.onload = function(){
var subEmail = document.getElementById("subEmail");
subEmail.onchange = function(){
if(subEmail.value == "")
{
subEmail.style.backgroundColor = "red";
}
else
{
subEmail.style.backgroundColor = "yellow";
}
};
};
</script>
</body>
<input type="text" style="background-color: yellow;" id="subEmail" />
js：
function changeColor() {
document.getElementById("subEmail").style.backgroundColor = "Insert color here"
}
您可以使用JavaScript和CSS来设置其样式。将样式添加到CSS中，并使用JavaScript通过classList属性添加/删除样式。
addRemoteImage = function(event) {
var textbox = document.querySelector("input[name='input-image']"),
imageUrl = textbox.value,
errorDiv = document.querySelector("div[name='input-image-error']");
if (imageUrl == "") {
errorDiv.style.display = "block";
textbox.classList.add('text-error');
setTimeout(function() {
errorDiv.style.removeProperty('display');
textbox.classList.remove('text-error');
}, 3000);
} else {
textbox.classList.remove('text-error');
}
}.no-image-url-error {
color: red;
display: none;
}
.text-error {
border: 1px solid red !important;
}<div class="div-image-background">
<div class="div-image-text">
<input class="input-image-url" type="text" placeholder="Add text" name="input-image">
<input type="button" onclick="addRemoteImage(event);" value="Submit">
</div>
<div class="no-image-url-error" name="input-image-error">Textbox empty</div>
</div>// program to change color of txtbox if empty string submitted
function chgColor() {
let x = document.getElementById("txt").value;
if (x == "") {
document.getElementById("txt").style.backgroundColor = "yellow";
}
}<input type="email" name="hi" value="hi" id="txt">
<button type="button" onclick="chgColor();">ok</button>
document.getElementById()返回单个元素，而getElementsByClassName()返回节点列表，所以你必须通过循环来处理，因为许多其他控件具有相同的类！FYI: http://javascript.about.com/library/bldom08.htm查看演示-->http://jsfiddle.net/2Xgfr/17/ - Dhaval Marthak