Mira lo que puedes hacer es meter en una variable tu input y tu button, y con el método onkeydown
de HTML para llamar tu función cada vez que tecleas un valor y dependiendo el valor cambiamos los estilos accediendo a los métodos de tu elemento HTML que guardamos previamente para cambiar la propiedad del background
HTML:
<input type="text" name="asunto" value="1" id="Myinput" onkeydown="RevisarValor()"><br>
<button type="submit" class="btn btn-primary col-md-16" style='width:200px; height:36px' id="bad" name="bad" >
Tarde libre por cumpleaños</button>
Ten en cuenta que pido el valor del DOM cada vez que ejecuto la función
JS:
var MiBoton = document.getElementById('bad');
function RevisarValor(){
var ValorInput = document.getElementById('Myinput').value;
console.log("Valor input = ",ValorInput);
if(ValorInput == 0){
MiBoton.style.background = "green";
}else if(ValorInput == 1){
MiBoton.style.background = "red";
}
}
Veo que igual usas Bootstrap, asi que puedes cambiar el MiBoton.style.background = "red"
por un MiBoton.classList.add("btn", "btn-danger")
o success
para el verde, Espero haber contestado tu duda.