Javascript-更改输入背景

Question

I have a function to change the background of a search box to red when a user tries to submit it but it's empty and then change it back to 'none' when user clicks on it, like this:

HTML:

<form action="http://www.google.com/search" id="search-box">
        <input type="search" name="q" id="q" />
        <input type="image" src="img/search.png" />
</form>

Javascript:

document.querySelector('#search-box').onsubmit = function () {
    if (document.querySelector('#q').value == '') {
        document.querySelector('#q').style.background = 'red';
        return false;
    }
}

document.querySelector('#q').onclick = function () {
    if (document.querySelector('#q').style.background == 'red') {
        document.querySelector('#q').style.background = '';
        return false;
    }
}

It works fine on chrome, but it doesn't works on firefox... any ideas why?

Answer 1

When you document.querySelector('#q').style.background it sets the element's background attribute to background: none repeat scroll 0% 0% #F00;

To achieve what you want, set the ...style.backgroundColor instead, as such

document.querySelector('#search-box').onsubmit = function () {
    if (document.querySelector('#q').value == '') {
        document.querySelector('#q').style.backgroundColor = 'red';
        return false;
    }
}

document.querySelector('#q').onclick = function () {
    if (document.querySelector('#q').style.backgroundColor == 'red') {
        document.querySelector('#q').style.backgroundColor = '';
        return false;
    }
}