Changing background color of text box input not working when empty

Question

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.

Dhaval Marthak · Accepted Answer · 2015-07-09T16:54:31.143

41

DEMO --> 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: 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.

edited Jul 09 '15 at 16:54

answered Jun 20 '13 at 16:38

Dhaval Marthak

17,246
6
46
68

how about to remove the color if there is something in the textbox? – samyb8 Jun 20 '13 at 16:39
Why doesn't it work if instead of having getElementsById I put getElementsByClassName and change id for class in the HTML? – samyb8 Jun 20 '13 at 17:13
1

@samyb8 Because `document.getElementById()` return single element and `getElementsByClassName()` returns _node lists_, so you have to loop through that because many other controls have same classes! **FYI:** http://javascript.about.com/library/bldom08.htm **See Demo** `-->` http://jsfiddle.net/2Xgfr/17/ – Dhaval Marthak Jun 20 '13 at 17:24

score 4 · Answer 2 · answered Jun 20 '13 at 16:36

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();

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.

score 4 · Answer 3 · answered Jun 20 '13 at 16:40

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";
            }
    }

score 3 · Answer 4 · answered Jun 20 '13 at 16:44

3

Try this:

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

answered Jun 20 '13 at 16:44

Ankit Zalani

3,068
5
27
47

score 2 · Answer 5 · answered Jun 20 '13 at 16:35

2

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";
                }
        }

answered Jun 20 '13 at 16:35

bugwheels94

30,681
3
39
60

score 2 · Answer 6 · answered Jun 20 '13 at 16:47

<! 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>

score 0 · Answer 7 · edited Aug 01 '21 at 18:26

You can style it using javascript and css. Add the style to css and using javascript add/remove style using classlist property.

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>

score 0 · Answer 8 · answered Mar 22 '19 at 08:16

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"
}

score 0 · Answer 9 · edited Aug 01 '21 at 18:22

0

// 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>

edited Aug 01 '21 at 18:22

Sven Eberth

3,057
12
24
29

answered Aug 01 '21 at 17:53

mohan Prabhu

1

Please add some explanation. Why do you think your proposed solution might help the OP. – Tyler2P Aug 02 '21 at 16:28

Changing background color of text box input not working when empty

9 Answers9

Linked