Mi pregunta es simple, así que espero que no sea tan difícil de resolver. No es tan difícil como lo es para mí al menos :).
<div id="block"> <input type="number" min="0" value="0"> </div>https://jsfiddle.net/wbrnmldr/9n60r82y/2/
[EDITAR] Ok, ya que claramente soy demasiado tonto para explicarlo correctamente, lo haré de nuevo. Se supone que el gris alrededor del campo de entrada se vuelve amarillo, no el campo de entrada en sí.
Así que tengo este div simple como se ve arriba. Lo que se supone que sucede es que el color de fondo de este div cambia de #F1F1F1 a #FFD200 cada vez que el valor de entrada ya no es igual a 0. Y para hacerlo más complicado, si el valor vuelve a ser cero debería volver a #F1F1F1. Ya lo hice funcionar cuando envié el valor, pero mi objetivo es verlo suceder en tiempo real.
¿Alguien puede ayudarme a abordar este problema? ¡Gracias por adelantado!
Las siguientes son algunas de las cosas que probé pero no pude trabajar:
$('.input').each(function() { var inputValue = $(this); inputValue.data('oldValue', inputValue.val()); inputValue.bind("propertychange change click keyup input paste", function(event){ if (inputValue.data('oldValue') != inputValue.val()) { inputValue.data('oldValue', inputValue.val()); document.getElementsByClassName('block').style.backgroundColor = "#FFD200"; } }); }); function changeColor() { document.getElementById("tracker-option-block").style.backgroundColor = "FFD200"; return false; }Debe escuchar cualquier cambio de valor de entrada usando un evento de 'entrada' como este:
document .querySelector('#block input') .addEventListener('input', event => { document.querySelector('#block').style.backgroundColor = event.target.value === '0' ? '#F1F1F1' : '#FFD200'; }) #block { margin: 10px; padding:30px; background-color: #F1F1F1; /* target color: #FFD200;*/ } <div id="block"> <input type="number" min="0" value="0"> </div>Referencias: .querySelector()
puede usar addEventListener (cambiar) para obtener valor siempre en la entrada de cambio y luego cambiar el color de fondo
document.querySelector('input').addEventListener("change",function(){ if(document.querySelector('#block input').value>0){ document.querySelector('#block input').style.backgroundColor= "#54BAB9"; } else{ document.querySelector('#block input').style.backgroundColor= "#F1F1F1"; } })ingrese la descripción de la imagen aquí
recuerde que el texto en una entrada no tiene su color de fondo, sino que tiene el color que he mostrado en el código que puede usar, ¡Feliz programación!
