Форма поиска пропадает при уменьшении широты экрана

В js новичок, углубляться в язык не буду, так что с этим туго.

Такое дело, есть форма поиска на сайте https://imgur.com/a/MZ4engv, которую при максимальной ширине экрана 1199px убираю и вместо него ставлю кнопку мобильного поиска, при нажатии на которую появляется форма поиска https://imgur.com/a/Kid9GnK.

А проблема состоит в том, что после повторного нажатия на кнопку поиска когда пропадает форма, при уменьшении ширины экрана пропадает кнопка мобильного поиска, но форма не появляется https://imgur.com/a/CeXY8nl.

Вот js код:

let mobileSearch = document.getElementById('mobile-search');
let searchForm = document.getElementById('search-form');
let headerInput = document.getElementById('header__input');
let bannerBackground = document.getElementById('banner-background');
    
mobileSearch.addEventListener("click", function() {
    if(searchForm.style.display == 'block') {
        searchForm.style.display = 'none';
        bannerBackground.classList.remove('banner-before');
    }
    else {
        searchForm.style.display = 'block';
        bannerBackground.classList.add('banner-before');
        headerInput.focus();
    }
});

И вот также как я "пытался" решить эту проблему:

let mobileSearch = document.getElementById('mobile-search');
let searchForm = document.getElementById('search-form');
let headerInput = document.getElementById('header__input');
let bannerBackground = document.getElementById('banner-background');
let x = window.matchMedia("(max-width: 1199px)");

function myMediaQuery(x) {
    if (x.matches) {
        mobileSearch.addEventListener("click", function() {
            if(searchForm.style.display == 'block') {
                searchForm.style.display = 'none';
                bannerBackground.classList.remove('banner-before');
            }
            else {
                searchForm.style.display = 'block';
                bannerBackground.classList.add('banner-before');
                headerInput.focus();
            }
        });
    }
}
    
x.addListener(myMediaQuery);

Всем ответившим заранее спасибо.


Ответы (1 шт):

Автор решения: Albert

В итоге все решилось, двумя функциями:

function showForm(){ if(x.matches) searchForm.style.display = 'block' }
function hideForm(){ if(f.matches) searchForm.style.display = 'none' }

let x = window.matchMedia("(min-width: 1199px)");
showForm();
x.addListener(showForm);

let f = window.matchMedia("(max-width: 1199px)");
hideForm();
f.addListener(hideForm);
→ Ссылка