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;
}   

CodePudding user response：

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()

CodePudding user response：

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";
}
})

CodePudding user response：

enter image description here

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!