使用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不正确。

下面是带有演示的正确案例；

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

Answer 2

尝试使用

可见性：隐藏；

然后

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

Answer 3

Vivek，为您的问题“如何切换状态，即打开和关闭”添加到Jerdine的答案中，更改下面的代码

 advancedSearchBox.style.display = "block";

to

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