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

User · Answer

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

User · Answer

You could have the CSS first style the textbox  then have js change it    lt input type  text  style  background-color  yellow   id  subEmail    gt    js   function changeColor       document getElementById  subEmail   style backgroundColor    Insert color here

User · Answer

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

User · Answer

Try this   function checkFilled     var inputVal   document getElementById  subEmail    if  inputVal              inputVal style backgroundColor    yellow

User · Answer

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      lt div class  div-image-text  gt       lt input class  input-image-url  type  text  placeholder  Add text  name  input-image  gt       lt input type  button  onclick  addRemoteImage event    value  Submit  gt     lt  div gt     lt div class  no-image-url-error  name  input-image-error  gt Textbox empty lt  div gt   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

User · Answer

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

User · Answer

lt   DOCTYPE html gt   lt html gt   lt head gt  lt  head gt   lt body gt        lt input type  text  id  subEmail  gt         lt script type  text javascript  gt           window onload   function             var subEmail   document getElementById  subEmail             subEmail onchange   function                 if subEmail value                                      subEmail style backgroundColor    red                             else                              subEmail style backgroundColor    yellow                                             lt  script gt    lt  body gt

User · Answer

DEMO -- gt  http   jsfiddle net 2Xgfr 829   HTML   lt input type  text  id  subEmail  onchange  checkFilled     gt    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

[javascript] Changing background color of text box input not working when empty

Examples related to javascript

Examples related to text

Examples related to input

Examples related to colors

Examples related to background