时间戳

首页 > 解决方案 > getElementById(...).onclick 没有响应

javascript - getElementById(...).onclick 没有响应

问题描述

我正在尝试显示一个可以打开和关闭的侧边栏，我在顶部有一个导航栏，其中包含一个带有 id="toggle" 的标签，我为其添加了一个 eventListener （它等待 HTML 之前加载运行 javascript 代码）和一个应该折叠/展开侧边菜单的相应函数。但是，当我尝试运行代码时，什么也没有发生。任何帮助都会很棒！

这是我的 HTML：

<html>
    <head>
        <title>Home</title>
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css') }}"/>
        <script type="text/javascript" src="{{ url_for('static', filename='index.js') }}"></script>
    </head>
    <body>

        <!-- navbar -->
        <div id="navbar">
          <a href="" id="toggle">&#9776; Menu</a>
          <a href="">Forget me</a>
        </div>

        <!-- sidebar -->
        <div id="mySidenav" class="sidenav">
          <a href="">About</a>
          {% for room in chatroom %}
          <a href="">{{ room }}</a>
          {% endfor %}
        </div>
    <body>
</html>

以及位于“静态”文件夹中的 js 文件：

document.addEventListener("DOMContentLoaded", function() {

  document.getElementById("toggle").onclick = function() {

    var sidebar = document.getElementById("mySidenav");

    if (sidebar.style.width === "250px") {
      sidebar.style.width = "0";

    } else {
      sidebar.style.width = "250px";
    }
  };
});

标签： javascriptflasknavbar

解决方案

我在没有测试任何代码的情况下看到了两个问题：

  1. 您的结束正文标签必须是</body>, 和;
  2. 该toggle链接将离开页面，您需要防止这种情况发生。您可以通过将toggle元素更改为 abutton type="button"或添加preventDefault()到您的点击处理程序 Javascript 来做到这一点。

推荐阅读