Entonces, if x = Number value background cambia bien, mi pregunta es cuándo x no tiene valor. ¿Cómo puedo tener un background-color de #ffffff . Actualmente, el código tiene #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"; }Aquí no ha dado ninguna condición si x no tiene un valor, por lo que la condición predeterminada es x=0. Deberías probar else if (!x).
else if (!x) { document.getElementById("GridA").style.backgroundColor = "#ffffff"; }Espero que esto te ayude.
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>