Помогите дописать или указать на ошибку в скрипте

var a = document.querySelector('#open-search-str'); var b = document.querySelector('.left-top-form'); var c = document.querySelector('#closeButton'); a.onclick = function() { if (b.className == "left-top-form") { b.className = "flex-position" } return false; }; c.onclick = function() { if (b.className == "flex-position") { b.style.display = "none" } }; #closeButton { background: transparent; border: none; outline: none; flex-basis: 30px; cursor: pointer; } .left-top-form { display: none; } .flex-position { width: 300px; border: 1px solid $dk-sl; justify-content: space-between; align-items: center; position: absolute; border-radius: 5px; z-index: 9999; top: 3px; right: 10px; padding: 5px; background: $sl; display: flex; } .search-type { flex-grow: 1; border: none; font-size: 14px; background: inherit; outline: none; }

Нажми на меня что бы я пропало

дело в том что я когда нажимаю на слово нажми, потом закрываю форму по крестику, и хочу сново форму открыть, то она глухо молчит, с джваскриптом я не очень, я пытался писать там код но видимо что то надо возвратить, помогите прошу Вас)

Ответ

У Вас за видимость объекта отвечает класс
.left-top-form { display: none; }
если он установлен, то элемента не видно. И Вы при клике по ссылке проверяете именно наличие этого класса и убираете его
if (b.className == "left-top-form") { b.className = "flex-position" }
А вот при закрытии, Вы вместо того, чтобы вернуть этот класс обратно
if (b.className == "flex-position") { b.className = "left-top-form" }
устанавливаете
b.style.display = "none"
Понятно, что следующая проверка
if (b.className == "left-top-form")
у Вас уже не выполнится.
А делаете Вы это, потому, что при простоя смене класса у Вас поле не скрывалось. Почему? Потому, что у Вас кнопка закрытия вложена в элемент

на который навешено свое событие onclick, которое заставляет форму показаться.
Так вот, при клике на дочерний элемент, событие всплывает и вызывает обработчики этого события у всех родителей. Чтобы это не происходило, нужно отменить всплытие, вызвав метод stopPropagation() у объекта event
var a = document.querySelector('#open-search-str'); var b = document.querySelector('.left-top-form'); var c = document.querySelector('#closeButton'); a.onclick = function() { if (b.className == "left-top-form") { b.className = "flex-position"; } return false; }; c.onclick = function(e) { e = e || window.event; if (b.className == "flex-position") { b.className = "left-top-form"; } e.stopPropagation(); }; #closeButton { background: transparent; border: none; outline: none; flex-basis: 30px; cursor: pointer; } .left-top-form { display: none; } .flex-position { width: 300px; border: 1px solid $dk-sl; justify-content: space-between; align-items: center; position: absolute; border-radius: 5px; z-index: 9999; top: 3px; right: 10px; padding: 5px; background: $sl; display: flex; } .search-type { flex-grow: 1; border: none; font-size: 14px; background: inherit; outline: none; }

Нажми на меня что бы я пропало