getElementById (...). onclick не отвечает - PullRequest
Новая
       19

getElementById (...). onclick не отвечает

0 голосов
/ 30 июня 2019

Я пытаюсь отобразить боковую панель, которую можно включать и выключать, у меня есть навигационная панель вверху, которая содержит тег с 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, который находится в папке «static»: 

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

1 Ответ

1 голос
/ 30 июня 2019

Я вижу две проблемы без тестирования какого-либо кода:

  1. Ваш закрывающий тег тела должен быть </body>, и;
  2. Ссылка toggle будет перемещаться за пределы страницы, и вам нужно будет это предотвратить.Вы можете сделать это, изменив элемент toggle на button type="button" или добавив preventDefault() в свой обработчик кликов Javascript.
...