这是我第一次使用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;
}
检查开发人员工具是否有错误;看来您为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>
尝试使用
可见性:隐藏;
然后
advSearchBtn.onclick = function(){
advancedSearchBox.style.visibility = "visible";
}
Vivek,为您的问题“如何切换状态,即打开和关闭”添加到Jerdine的答案中,更改下面的代码
advancedSearchBox.style.display = "block";
to
advancedSearchBox.style.display = advancedSearchBox.style.display === "block" ? "none" : "block";