Changing Background Color Of Text Box Input Not Working When Empty

I am having a tough time with this javascript code to change the background color of a text input if the input is empty. Here is the code: function checkFilled() { var inputVal

Solution 1:

DEMO-->http://jsfiddle.net/2Xgfr/829/

HTML

<inputtype="text"id="subEmail" onchange="checkFilled();">

JavaScript

functioncheckFilled() {
    var inputVal = document.getElementById("subEmail");
    if (inputVal.value == "") {
        inputVal.style.backgroundColor = "yellow";
    }
    else{
        inputVal.style.backgroundColor = "";
    }
}

checkFilled();

Note: You were checking value and setting color to value which is not allowed, that's why it was giving you errors. try like the above.

Solution 2:

You didn't call the function and you have other errors, should be:

functioncheckFilled() {
    var inputVal = document.getElementById("subEmail");
    if (inputVal.value == "") {
        inputVal.style.backgroundColor = "yellow";
    }
}
checkFilled();

Fiddle

You were setting inputVal to the string value of the input, but then you tried to set style.backgroundColor on it, which won't work because it's a string, not the element. I changed your variable to store the element object instead of its value.

Solution 3:

on body tag's onLoad try setting it like

document.getElementById("subEmail").style.backgroundColor = "yellow";

and after that on change of that input field check if some value is there, or paint it yellow like

functioncheckFilled() {
var inputVal = document.getElementById("subEmail");
if (inputVal.value == "") {
    inputVal.style.backgroundColor = "yellow";
            }
    }

Solution 4:

Try this:

functioncheckFilled() {
var inputVal = document.getElementById("subEmail");
if (inputVal == "") {
    inputVal.style.backgroundColor = "yellow";
    }
}

Solution 5:

Don't add styles to value of input so use like

functioncheckFilled() {
    var inputElem = document.getElementById("subEmail");
    if (inputElem.value == "") {
        inputElem.style.backgroundColor = "yellow";
                }
        }