I am Beginner and making sidebar, I used JsHint to check js code error following error is showing but the sidebar is working please guide to fix error
This was the error
Two unused variables
1 openFunction
5 closeFunction
And here is my code
<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>
And here is Javascript Code
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";
}
As @Sebastian Simon said in his comment, use addEventListener to attach your handlers:
<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>
And find the elements in the DOM and then attach the handlers using 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";
}
document.addEventListener("DOMContentLoaded", () => {
const barsElement = document.getElementById('bars');
const sidenavElement = document.getElementById('bg-sidenav');
bars.addEventListener('click', openFunction);
sidenavElement.addEventListener('click', closeFunction);
});