3

Hola buenas tardes intento realizar un código que cambie el color de un botón cuando en un input hay un valor = 1 el botón este de un color rojo y cuando el input tenga un valor de 0 este de color verde, la verdad no se como se hace.

<input type="text" name="asunto" value="1" ><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>

6 respuestas 6

4

con jQuery podrías hacer lo siguiente, capturando el evento input, chequeas cual es el valor que posee el input, en caso de ser 0 asigno la clase .cero, en caso de ser 1 .uno y si no es ninguno de los dos, .otro

$('input').on('input',function()
{  

  var btn = $('#bad');
  
  btn.removeClass('uno');
  btn.removeClass('cero');
  btn.removeClass('otro');
  
  switch($(this).val()) {
    case '0':
        btn.addClass('cero');
        break;
    case '1':
        btn.addClass('uno');
        break;
    default:
       btn.addClass('otro');
        break;
}
  
});
button
{
  color: white;
}
button.uno
{
  background-color:red;  
}
button.cero
{
  background-color: green;  
}
button.otro
{
  background-color: blue;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="asunto" ><br>


<button id="bad" name="bad" class="otro">
Tarde libre por cumpleaños</button>

Espero que sea lo que andabas buscando!

3

puedes hacerlo con keyup para obtener el valor del input al escrivir algo asi :

$(document).ready(function(){

$("#asunto").keyup(function(){

  var valor=$(this).val();
  
  if(valor >0){
  $("#bad").css("background","green")
  }else{
  $("#bad").css("background","none")
  }
})

})
<input type="text" name="asunto" value="0" id="asunto"><br>


<button type="submit" class=""  id="bad" name="bad">
Tarde libre por cumpleaños</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

2

//Ejecutamos la funcion al cargar
$(function() {
  check();

//funcion que se ejecuta al cambiar valor del input
  $("#valor").keyup(function() {
    check();
  });
});

//valida el color
function check() {
  var opcion = $("#valor").val();

  if (opcion == 1) {
    $("#bad").css("background-color", "red");
  } else if (opcion == 0) {
    $("#bad").css("background-color", "green");
  } else {
    $("#bad").css("background-color", "yellow");
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="text" name="asunto" value="1" id="valor"><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>

2

Realice un pequeño código. Cuando le des click al botón si el campo posee el valor 1 el color del botón cambiará, espero que te sirva:

$("#cambiar").click((e) => {

  let valorInput = parseInt($("#campoColor").val().trim());
  
  if(valorInput === 1){
    $(e.target).addClass("conColor");
  }else{
    $(e.target).removeClass("conColor");
  }

});
.conColor{
background-color:green;
color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="text" value="" id="campoColor"><button id="cambiar">Cambiar color</button>

1

De esta forma seria con javascript

function cambiar() {
		var contenido = document.getElementsById("asunto")[0].value;

		if(contenido == 0 ){
			document.getElementById("#bad").style.backgroundColor="green";
		}
		else if(contenido == 1 ){
			document.getElementById("#bad").style.backgroundColor="red";
		}
		else{
			alert('El valor no es reconocido, intente de nuevo');
		}
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" id="asunto" name="asunto" onchange="cambiar()"><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>

Con jQuery lo puedes hacer mucho mas facil de esta forma function cambiar() { var contenido = $("#asunto").val().trim();

        if(contenido == 0 ){
            $("#bad").css('background', 'green');
        }
        else if(contenido == 1 ){
            $("#bad").css('background', 'red');
        }
        else{
            alert('El valor no es reconocido, intente de nuevo');
        }
    }

recuerda importar la libreria si lo usasa asi

1

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.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.