Я впервые использую javascript и пытаюсь открыть форму после нажатия кнопки. После просмотра постов здесь и попыток сделать это самостоятельно, я не могу заставить это работать. Всякий раз, когда я нажимаю кнопку, ничего не появляется. Кто-нибудь может помочь исправить эту проблему?

Ниже приведен раздел моего файла index.php, в котором я пытаюсь это сделать.

{amp}lt;button class="advanced-search" id="adv-search-btn"{amp}gt;Advanced Search{amp}lt;/button{amp}gt; {amp}lt;div class="advanced-search-box" id="advanced-search-box"{amp}gt; {amp}lt;form{amp}gt; {amp}lt;input id="searchA" class="searchbox6" type="text" placeholder="% of A's" name="num_A"{amp}gt; {amp}lt;input id="searchAminus" class="searchbox7" type="text" placeholder="% of A-'s" name="num_Aminus"{amp}gt; {amp}lt;input id="searchBplus" class="searchbox8" type="text" placeholder="% of B 's" name="num_Bplus"{amp}gt; {amp}lt;input id="searchB" class="searchbox9" type="text" placeholder="% of B's" name="num_B"{amp}gt; {amp}lt;input id="searchBminus" class="searchbox10" type="text" placeholder="% of B-'s" name="num_Bminus"{amp}gt; {amp}lt;input id="searchCplus" class="searchbox11" type="text" placeholder="% of C 's" name="num_Cplus"{amp}gt; {amp}lt;input id="searchC" class="searchbox12" type="text" placeholder="% of C's" name="num_C"{amp}gt; {amp}lt;input id="searchCminus" class="searchbox13" type="text" placeholder="% of C-'s" name="num_Cminus"{amp}gt; {amp}lt;/form{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;script{amp}gt; var advSearchBtn = document.getElementbyID("adv-search-btn"); var advancedSearchBox = document.getElementbyID("advanced-search-box"); advSearchBtn.onclick = function(){ advancedSearchBox.style.display = "block"; } {amp}lt;/script{amp}gt; 

И в файле CSS у меня есть

 .advanced-search-box{ display: none; } 

Проверьте инструмент dev на наличие ошибок; кажется, что вы ввели неправильный случай для document.getElementById . Вы использовали document.getElementbyID что неверно.

Правильный случай с демо-версией ниже;

 var advSearchBtn = document.getElementById("adv-search-btn"); var advancedSearchBox = document.getElementById("advanced-search-box"); 
 .advanced-search-box { display: none; } 
 {amp}lt;button class="advanced-search" id="adv-search-btn"{amp}gt;Advanced Search{amp}lt;/button{amp}gt; {amp}lt;div class="advanced-search-box" id="advanced-search-box"{amp}gt; {amp}lt;form{amp}gt; {amp}lt;input id="searchA" class="searchbox6" type="text" placeholder="% of A's" name="num_A"{amp}gt; {amp}lt;input id="searchAminus" class="searchbox7" type="text" placeholder="% of A-'s" name="num_Aminus"{amp}gt; {amp}lt;input id="searchBplus" class="searchbox8" type="text" placeholder="% of B 's" name="num_Bplus"{amp}gt; {amp}lt;input id="searchB" class="searchbox9" type="text" placeholder="% of B's" name="num_B"{amp}gt; {amp}lt;input id="searchBminus" class="searchbox10" type="text" placeholder="% of B-'s" name="num_Bminus"{amp}gt; {amp}lt;input id="searchCplus" class="searchbox11" type="text" placeholder="% of C 's" name="num_Cplus"{amp}gt; {amp}lt;input id="searchC" class="searchbox12" type="text" placeholder="% of C's" name="num_C"{amp}gt; {amp}lt;input id="searchCminus" class="searchbox13" type="text" placeholder="% of C-'s" name="num_Cminus"{amp}gt; {amp}lt;/form{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;script{amp}gt; var advSearchBtn = document.getElementById("adv-search-btn"); var advancedSearchBox = document.getElementById("advanced-search-box"); advSearchBtn.onclick = function() { /* if(advancedSearchBox.style.display != "block"){ advancedSearchBox.style.display = "block"; }else{ advancedSearchBox.style.display = "none"; }*/ advancedSearchBox.style.display = advancedSearchBox.style.display === "block" ? "none" : "block"; } {amp}lt;/script{amp}gt; 

Вивек, добавив к ответу Джердина на ваш вопрос «Как переключать состояние, т. Е. Открывать и закрывать», измените приведенный ниже код

  advancedSearchBox.style.display = "block"; 

в

 advancedSearchBox.style.display = advancedSearchBox.style.display === "block" ? "none" : "block"; 

Попробуй использовать

видимость: скрытая;

тогда

 advSearchBtn.onclick = function(){ advancedSearchBox.style.visibility = "visible"; }