Question

94

Change color using querySelector

rated 0 times [ 101] [ 7] / answers: 1 / hits: 30311 / 8 Years ago, thu, june 23, 2016, 12:00:00

I'm following a Javascript tutorial using a book.
The exercise is change the background color in a <input type=search> using document.querySelector. When I try to search something with no text in the search box, the background from <input> changes to red. I did it using onsubmit and some conditional. But in the next part, it must returns to white bckground using onfocus and I'm not getting.

The code that I tried is

document.querySelector('#form-busca').onsubmit = function() {

    if (document.querySelector('#q').value == '') {

        document.querySelector('#q').style.background = 'red';

        return false;

    }

}



document.querySelector('#form-busca').onfocus = function() {

    document.querySelector('#q').style.background = 'white';

}

Can someone help me? Thanks a lot!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

blaisep

Add To Favorites

Follow

Total Points: 748

Total Questions: 95

Total Answers: 108

Location: Federated States of Micronesia

Member since Sun, May 16, 2021

3 Years ago

blaisep questions

1 Change Center position of React leaflet map

Wed, Dec 16, 20, 00:00, 4 Years ago

1 Get JavaScript Map values as array?

Sun, Aug 16, 20, 00:00, 4 Years ago

1 How to do an inline for loop in JavaScript, that's not connected to a variable

Tue, Apr 7, 20, 00:00, 4 Years ago

1 How to write data to a file using Puppeteer?

Tue, Nov 12, 19, 00:00, 5 Years ago

1 Swiper coverflow effect not working as expected

Mon, Nov 11, 19, 00:00, 5 Years ago

View All

answered 8 Years ago harleedayanarar · Accepted Answer

almost got it dude.

change:

document.querySelector('#form-busca').onfocus

to:

document.querySelector('#q').onfocus

revised code:

correct sample:

document.querySelector('#form-busca').onsubmit = function() {

    if (document.querySelector('#q').value == '') {

        document.querySelector('#q').style.background = 'red';

        return false;

    }

}



document.querySelector('#q').onfocus = function() {

    document.querySelector('#q').style.background = 'white';

}