Изменить цвет с помощью querySelector

Question

Я следую учебнику по Javascript, используя книгу. Упражнение - это изменение цвета фона в <input type="search"> с использованием document.querySelector. Когда я пытаюсь найти что-то без текста в окне поиска, фон от <input> меняется на красный. Я сделал это, используя onsubmit и некоторые условные. Но в следующей части он должен вернуться в белый bckground с помощью onfocus, и я не получаю.

Код, который я попробовал это

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

Может кто-нибудь мне помочь? Большое спасибо!

Answer 1

почти получилось чувак.

изменение:

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

к:

document.querySelector('#q').onfocus

пересмотренный код:

правильный образец:

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

Answer 2

Похоже, вы хотите, чтобы цвет фона ввода менялся на белый, когда элемент input сфокусирован.

Попробуйте изменить селектор onfocus на:
document.querySelector('#q').onfocus ...

Answer 3

Вы хотите onfocus обработчик быть на #q элемент, а не на #form-busca; фокус формы не имеет значения, вы хотите, чтобы очистить фон, когда получает входной элемент фокус:

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