My question is simple so I hope it shouldn't be so hard to solve. Not as hard as it is for me at least :).
<div id="block">
<input type="number" min="0" value="0">
</div>
https://jsfiddle.net/wbrnmldr/9n60r82y/2/
[EDIT ]Ok since I'm clearly too dumb to explain it properly I will do it again. The grey around the input field is supposed to go yellow, not the input field itself.
So I have this simple div as seen above. What is supposed to happen is that the background color of this div changes from #F1F1F1 to #FFD200 anytime the input value doesn't equal 0 anymore. And to make it more complicated, if the value is zero again it should return to #F1F1F1. I already got it to work when submitting the value but my goal is to see it happen in real-time.
Can anybody help me tackle this problem? Thanks in advance!
Following are some of the things I tried but I didn't get to work:
$('.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;
}
You need to listen any input value changes using 'input' event like this:
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>Refs: .querySelector()
you can use addEventListener (change) to get value always on change input then change background color
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";
}
})
please remember that text in an input doesn't have its background color , rather it have color that i've shown in the code that you can use, Happy programming!
