javascript - 在侧边栏中检测到 javascript 代码错误

Question

我是初学者并制作侧边栏，我使用 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";
  }

标签： javascripthtmljqueryjshint

Answer 1

正如@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 附加处理程序：

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);
});