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 = document.getElementById("subEmail").value;
if (inputVal == "") {
inputVal.style.backgroundColor = "yellow";
}
}
Example: http://jsfiddle.net/2Xgfr/
I would expect the textbox to come out yellow at the beginning.
This question is related to
javascript
text
input
colors
background
You can style it using javascript and css. Add the style to css and using javascript add/remove style using classlist property. Here is a JSFiddle for it.
<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>
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');
}
}
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
function checkFilled() {
var inputVal = document.getElementById("subEmail");
if (inputVal.value == "") {
inputVal.style.backgroundColor = "yellow";
}
}
You didn't call the function and you have other errors, should be:
function checkFilled() {
var inputVal = document.getElementById("subEmail");
if (inputVal.value == "") {
inputVal.style.backgroundColor = "yellow";
}
}
checkFilled();
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.
Don't add styles to value of input so use like
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>
You could have the CSS first style the textbox, then have js change it:
<input type="text" style="background-color: yellow;" id="subEmail" />
js:
function changeColor() {
document.getElementById("subEmail").style.backgroundColor = "Insert color here"
}
Try this:
function checkFilled() {
var inputVal = document.getElementById("subEmail");
if (inputVal == "") {
inputVal.style.backgroundColor = "yellow";
}
}
Source: Stackoverflow.com