Why does the javascript css style works for first condition but not for second?

Question

I have a progress bar that should react to input if the input is blank or equals 0 the inner progress div should have no background. For all other inputs it should be fill. It does work for the condition that the input is blank however after the input is entered there is no change reflected.

 var first = document.getElementById("first"); if (a.innerHTML == '') { first.style.background = "none"; } else { first.style.background = "#e91b23"; } 

 .progress_bars_vertical_holder { display: inline-block; width: 100%; position: relative; } .progress_bars_vertical { display: inline-block; position: relative; float: left; margin: 0px 2% 0px 0px; } .progress_bars_vertical:last-child { margin: 0px; } .progress_bars_vertical .progress_content_outer { height: 200px; position: relative; } 

 <input id="a" onkeypress="return tisNumberKey(event)" type="text" style="height: 250px; margin-top: 10px; width: 75%; text-align: center; font-size: 100px;" type="text" data-in="" /> <div class="progress_bars_vertical_holder vertical"> <div class="progress_bars_vertical background_color" style="width: 99.7%;"> <div class="progress_content_outer"> <div data-percentage="30" id="first" class="progress_content" style="height: 50%; background-color: rgb(22, 146, 159);"></div> </div> </div> </div> 

http://codepen.io/georgiemathews/pen/mJGBOV

Answer 1

It should be:

  first.style.background = "#e91b23";
                            ^---

The # marks that string as a hex value. Otherwise it's just seen as some random garbage.

Answer 2

You had a few typos. I grabbed a copy of your CodePen demo and here is a working version you can play with .

HTML

I got it working and the red progress bar is added when you type into the box. But, when you clear the input range, the indicator stayed red because it was simply looking for a keypress. I changed it to oninput to get the desired behavior.

You also had a typo in your function - it said tisNumberKey - changed to isNumberKey .

<input id="a" oninput="return isNumberKey(event)" type="text" style="height: 250px; margin-top: 10px; width: 75%; text-align: center; font-size: 100px;" type="text" data-in="" />

JavaScript

You weren't calling the function with anything. The HTML was trying to call the script, but there was no named function. Adding function isNumberKey(event) to the script allows it to run when you type in the input range.

Finally, I changed the logic for adding the class. If the field is not empty, make it red. Ran more consistently with the other changes. Working script is below:

function isNumberKey(){
var first =  document.getElementById("first");
var a = document.getElementById("a");
 if (a.value !== '') {
  first.setAttribute("class", "red-bg");
 } else {
  first.setAttribute("class", "no-bg");
 }
}