Changing background color on any number input higher than 0 in JavaScript

Question

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

Please [edit] your question, don't add a block of code as a comment. — freedomn-m, Feb 08 '22 at 14:27
Ah yes, I never asked a question, just figuring out the buttons lol — wybo, Feb 08 '22 at 14:28
The button to add a Stack Snippet looks like `<>` in a page... — Heretic Monkey, Feb 08 '22 at 14:30
But honestly, there are plenty of questions about how to react to changes in value in an input... — Heretic Monkey, Feb 08 '22 at 14:31
From the now-deleted code comment (edit: now added to question) your issue is that `document.getElementsByClassName` returns a collection, so does not have a `.style.` property. Which is one reason why we use jquery - no need to iterate collections manually (*uck*) — freedomn-m, Feb 08 '22 at 14:33
Most likely answers your question: [What do querySelectorAll and getElementsBy* methods return?](https://stackoverflow.com/a/10693852/2181514) — freedomn-m, Feb 08 '22 at 14:33
[`bind` was deprecated in jQuery 3.0](https://api.jquery.com/bind/), after the introduction of [`on` in jQuery 1.7](https://api.jquery.com/on/). — Heretic Monkey, Feb 08 '22 at 14:41

Xeelley · Accepted Answer · 2022-02-08T14:55:02.287

1

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

edited Feb 08 '22 at 14:55

answered Feb 08 '22 at 14:34

Xeelley

1,081
2
8
18

Sorry, what I meant was the grey
should go yellow, not the input field itself.
– wybo Feb 08 '22 at 14:36
@Wybren fixed, sorry didn't notice before – Xeelley Feb 08 '22 at 14:39
Yooo thanks man! I am forever grateful. – wybo Feb 08 '22 at 14:42
You should bind on `input`, not `change` so the effect is immediate. – freedomn-m Feb 08 '22 at 14:53
@freedomn-m correct, ty for notice, I changed snippet – Xeelley Feb 08 '22 at 14:56

score -1 · Answer 2 · answered Feb 08 '22 at 14:47

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

Vinit Kasture · Answer 3 · 2022-02-08T14:37:06.780

-4

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!

edited Feb 08 '22 at 14:37

answered Feb 08 '22 at 14:28

Vinit Kasture

16
3

This does not answer the question, apart from being just an image – Luca Kiebel Feb 08 '22 at 14:31
I'm sorry if I wasn't clear enough but what I meant was the grey
needs to change to yellow when the input isn't zero anymore.
– wybo Feb 08 '22 at 14:34
inputs have a background color but the actual texts in an input doesn't have a a background color! Sry my bad! – Vinit Kasture Feb 08 '22 at 14:36

Changing background color on any number input higher than 0 in JavaScript

3 Answers3