javascript - 按下按钮后使用javascript打开表单

Question

这是我第一次使用 javascript，我试图在单击按钮后打开一个表单。在查看了此处的帖子并尝试自己执行此操作后，我无法使其正常工作。每当我单击按钮时，什么也没有显示。 谁能帮助解决这个问题？

下面是我尝试在 index.php 文件中执行此操作的部分

<button class="advanced-search" id="adv-search-btn">Advanced Search</button>
        <div class="advanced-search-box"  id="advanced-search-box">
            <form>
                <input id="searchA" class="searchbox6" type="text" placeholder="% of A's" name="num_A">
                <input id="searchAminus" class="searchbox7" type="text" placeholder="% of A-'s" name="num_Aminus">
                <input id="searchBplus" class="searchbox8" type="text" placeholder="% of B+'s" name="num_Bplus">
                <input id="searchB" class="searchbox9" type="text" placeholder="% of B's" name="num_B">
                <input id="searchBminus" class="searchbox10" type="text" placeholder="% of B-'s" name="num_Bminus">
                <input id="searchCplus" class="searchbox11" type="text" placeholder="% of C+'s" name="num_Cplus"> 
                <input id="searchC" class="searchbox12" type="text" placeholder="% of C's" name="num_C">
                <input id="searchCminus" class="searchbox13" type="text" placeholder="% of C-'s" name="num_Cminus">
            </form>
        </div>

        <script>
            var advSearchBtn = document.getElementbyID("adv-search-btn");
            var advancedSearchBox = document.getElementbyID("advanced-search-box");

            advSearchBtn.onclick = function(){
                advancedSearchBox.style.display = "block";
            }

        </script> 

在我的 CSS 文件中

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

Answer 1

检查开发工具是否有错误；您似乎为 document.getElementById 输入了错误的大小写。 您使用了不正确的 document.getElementbyID。

下面是带demo的正确案例；

var advSearchBtn = document.getElementById("adv-search-btn");
var advancedSearchBox = document.getElementById("advanced-search-box");

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

<button class="advanced-search" id="adv-search-btn">Advanced Search</button>
<div class="advanced-search-box" id="advanced-search-box">
  <form>
    <input id="searchA" class="searchbox6" type="text" placeholder="% of A's" name="num_A">
    <input id="searchAminus" class="searchbox7" type="text" placeholder="% of A-'s" name="num_Aminus">
    <input id="searchBplus" class="searchbox8" type="text" placeholder="% of B+'s" name="num_Bplus">
    <input id="searchB" class="searchbox9" type="text" placeholder="% of B's" name="num_B">
    <input id="searchBminus" class="searchbox10" type="text" placeholder="% of B-'s" name="num_Bminus">
    <input id="searchCplus" class="searchbox11" type="text" placeholder="% of C+'s" name="num_Cplus">
    <input id="searchC" class="searchbox12" type="text" placeholder="% of C's" name="num_C">
    <input id="searchCminus" class="searchbox13" type="text" placeholder="% of C-'s" name="num_Cminus">
  </form>
</div>

<script>
  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";
  }
</script>