按钮在第一次点击时没有响应

Question

I have a button in the header of my website and it has to open/change another div display state, on first click. But it's not responding on first click and I can't find the bug. I would appreciate some help..

 /* show search div */ function ShowSearchDiv() { var searchbox = document.getElementById("header-search-form"); if (searchbox.style.display === "none") { searchbox.style.display = "block"; document.getElementById("search-icon").classList.remove('fa-search', 'fa-lg2'); document.getElementById("search-icon").classList.add('fa-close', 'fa-lg-sm'); } else { searchbox.style.display = "none"; document.getElementById("search-icon").classList.remove('fa-close', 'fa-lg-sm'); document.getElementById("search-icon").classList.add('fa-search', 'fa-lg2'); } } 

 <button class="btn-rd-nav" onclick="ShowSearchDiv()" id="btn-search-home"> <i id="search-icon" class="fa-search fa fa-lg3 fa-bg"></i> </button> <div id="header-search-form" class="search-form slideInUpbox"> <!-----> <form method="post" action="search-results.asp?action=kword&keyw=&pg=" id="frmsk" name="frmsk" class="home-search"> <div class="input-group"> <input type="text" id="txtsearch" name="txtsearch" placeholder="What are you looking for?"> <button onClick="javascript:gosearch()" class="btn-search" type="submit"><span class="fa-search fa fa-lg"></span></button> </div> </form> </div> 

Answer 1

I found the bug and changed the if statement to:

 <script> /* show search div */ function ShowSearchDiv() { var searchbox = document.getElementById("header-search-form"); if (searchbox.style.display === "block") { searchbox.style.display = "none"; document.getElementById("search-icon").classList.remove('fa-close', 'fa-lg-sm'); document.getElementById("search-icon").classList.add('fa-search', 'fa-lg2'); } else { searchbox.style.display = "block"; document.getElementById("search-icon").classList.remove('fa-search', 'fa-lg2'); document.getElementById("search-icon").classList.add('fa-close', 'fa-lg-sm'); } } </script> 

This way instead of checking "if the div is hidden, then make it visible and else hide it...", I changed it to "if the div is visible, then make it hidden, else leave it visible :) Now it's working on first click.