[英]Javascript Sidebar error - Sidebar display before clicking the sidebar button
[英]error in javascript code detected in sidebar
我是初學者,正在制作側邊欄,我使用 JsHint 檢查 js 代碼錯誤顯示以下錯誤,但側邊欄正在工作,請指導修復錯誤
這是錯誤
Two unused variables
1 openFunction
5 closeFunction
這是我的代碼
<div class="hamburger">
<a href="javascript:void(0)"><i id="bars" onclick="openFunction();" class="fas fa-bars"
aria-hidden="true"></i></a>
</div>
<!---------------------Sidebar--------------------------->
<div id="bg-sidenav" onclick="closeFunction();" class="bg-sidebar">
</div>
<div id="sidebar-cont" class="sidebar-content">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</div>
這是 Javascript 代碼
function openFunction(){
document.getElementById('sidebar-cont').style.width = "220px";
document.getElementById('bg-sidenav').style.width = "100%";
}
function closeFunction() {
document.getElementById('sidebar-cont').style.width = "0";
document.getElementById('bg-sidenav').style.width = "0";
}
正如@Sebastian Simon 在評論中所說,使用 addEventListener 附加您的處理程序:
<div class="hamburger">
<a href="javascript:void(0)"><i id="bars" class="fas fa-bars"
aria-hidden="true"></i></a>
</div>
<!---------------------Sidebar--------------------------->
<div id="bg-sidenav" class="bg-sidebar">
</div>
<div id="sidebar-cont" class="sidebar-content">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</div>
並在 DOM 中找到元素,然后使用 JavaScript 附加處理程序:
const barsElement = document.getElementById('bars');
const sidenavElement = document.getElementById('bg-sidenav');
function openFunction(){
document.getElementById('sidebar-cont').style.width = "220px";
document.getElementById('bg-sidenav').style.width = "100%";
}
function closeFunction() {
document.getElementById('sidebar-cont').style.width = "0";
document.getElementById('bg-sidenav').style.width = "0";
}
bars.addEventListener('click', openFunction);
sidenavElement.addEventListener('click', closeFunction);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.