Скрипт открытия и закрытия формы поиска

11 сентября 2021, 16:40

Мне нужно написать скрипт, при котором, при нажатии картинки "search"

<div class="search"><img src="Images/search.svg" onclick="disp()"></div>

откроется форма поиска:

<div id="searchForm" > 
            <div class="box"> 
                <input type="search" id="search"/> 
                <span id="closeSearch"><img src="Images/closeSearch.svg" onclick="close()"></span> 
            </div> 
        </div>

С этим я успешно справился. Нашел скрипт в интернете:

function disp() { 
                    let form = document.getElementById("searchForm"); 
                    form.style.display = "block"; 
                     
                }

При этом, мне нужно реализовать закрытие этой формы поиска на картинку "closeSearch" (она появится вместе с формой поиска). Подсмотрев на функцию открытия, я решил таким же методом сделать и закрытие формы:

function close() { 
                    let close = document.getElementById("searchForm"); 
                    close.style.display = "none"; 
                }

Но что-то пошло не так, и оно не работает. Буду весьма благодарен за вашу помощь.

Answer 1

function disp() { 
                    let form = document.getElementById("searchForm"); 
                    form.style.display = "block"; 
                     
                } 
                 
                function closet() { 
                    let close = document.getElementById("searchForm"); 
                    close.style.display = "none"; 
                }

#searchForm { 
display: none 
} 
img { 
vertical-align: middle; 
cursor: pointer 
}

<div class="search">Нажми--> <img src="Images/search.svg" onclick="disp()"></div> 
 
<div id="searchForm" > 
            <div class="box"> 
                <input type="search" id="search"/> 
                <span id="closeSearch">Нажми--> <img src="Images/closeSearch.svg" onclick="closet()"></span> 
            </div> 
        </div>