Background Error fault when applying condition-CodePudding

So if x = Number value background changes fine, my question is when x has no value. How can I have a background-color of #ffffff. Currently, code is defaulting to #db0000.

JS:

var grid_value = document.getElementById("Vone").innerHTML;
var x = grid_value;
            
if (x >= 0 && x < 15) {
  document.getElementById("GridA").style.backgroundColor = "#db0000";
} else if (x >= 15 && x < 25) {
  document.getElementById("GridA").style.backgroundColor = "#f0ad4e";
} else if (x >= 25) {
  document.getElementById("GridA").style.backgroundColor = "#5cb85c";
} else if (x = "Pick" ) {
  document.getElementById("GridA").style.backgroundColor = "#0085eb";
} else if (x = "" ) {
  document.getElementById("GridA").style.backgroundColor = "#ffffff";
}

CodePudding user response：

Here you haven't given any conditions if x doesn't have a value, so the default condition is x=0. You should try else if (!x).

else if (!x) {
  document.getElementById("GridA").style.backgroundColor = "#ffffff";
}

Hope this helps you out.

CodePudding user response：

const gA = document.getElementById("GridA");
document.getElementById("Vone").addEventListener("blur", function(event){
  gA.classList = "";
  var x = this.value;
  if  (x === "") {
    gA.classList.add("white");
  } else if (x === "Pick") {
    gA.classList.add("color1");
  } else if (x >= 0 && x < 15) {
    gA.classList.add("color2");
  } else if (x >= 15 && x < 25) {
    gA.classList.add("color3");
  } else if (x >= 25) {
    gA.classList.add("color4");
  } 
});

#GridA { height:100px; border:1px solid grey; margin-top:5px; }

.color1 { background-color:#dbf000; }
.color2 { background-color:#f0ad4e; }
.color3 { background-color:#5cb85c; }
.color4 { background-color:#0085eb; }
.white  { background-color:#ffffff; }

<input id="Vone">
<div id="GridA"></div>