Question

我试图实现全屏菜单，但我没有遇到任何导轨错误，但是当我运行该项目时，它根本不起作用。当我去检查元素时，我得到了这个错误：

Cannot read property 'addEventListener' of null

这是我的js：

(function() {

  var Menu = (function() {
    var burger = document.querySelector('.burger');
    var menu = document.querySelector('.menu');
    var menuList = document.querySelector('.menu__list');
    var brand = document.querySelector('.menu__brand');
    var menuItems = document.querySelectorAll('.menu__item');

    var active = false;

    var toggleMenu = function() {
      if (!active) {
        menu.classList.add('menu--active');
        menuList.classList.add('menu__list--active');
        brand.classList.add('menu__brand--active');
        burger.classList.add('burger--close');
        for (var i = 0, ii = menuItems.length; i < ii; i++) {
          menuItems[i].classList.add('menu__item--active');
        }

        active = true;
      } else {
        menu.classList.remove('menu--active');
        menuList.classList.remove('menu__list--active');
        brand.classList.remove('menu__brand--active');
        burger.classList.remove('burger--close');
        for (var i = 0, ii = menuItems.length; i < ii; i++) {
          menuItems[i].classList.remove('menu__item--active');
        }

        active = false;
      }
    };

    var bindActions = function() {
      **burger.addEventListener('click', toggleMenu, false);**
    };

    var init = function() {
      bindActions();
    };

    return {
      init: init
    };

  }());

  Menu.init();

}());

这是我第一次使用香草 - 为了在铁轨中使用它，我是否缺少额外的步骤？（通过＆＃39;要求＆＃39;或者其他什么？或者它是内置的？谢谢！

我的HTML：

<!DOCTYPE html>

<head>

<title>AaP</title>
<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

<%= csrf_meta_tags %>

</head>

<body>

<div class="header">
<h1>ASHLEIGH</font> <font color=#f6f6f6>/</font> <font color=#fbe2d4>ALMEIDA</font></h1>
  <div class="burger">
    <div class="burger__patty"></div>
    <div class="burger__patty"></div>
    <div class="burger__patty"></div>
  </div>
<nav class="menu">
    <div class="menu__brand">x
      <a href=""><div class="logo"></div></a>
    </div>
    <ul class="menu__list">
      <li class="menu__item"><a href="" class="menu__link">About</a></li>
      <li class="menu__item"><a href="" class="menu__link">Work</a></li>
       <li class="menu__item"><a href="" class="menu__link">Contact</a></li>
      <li class="menu__item">
        x</i></a>
      </li>
      <li class="menu__item">
        x
          <i class="fa fa-dribbble"></i></a>
      </li>
    </ul>
  </nav>

</div>

Answer 1

您收到错误的原因是脚本在加载和解析DOM之前执行。所以此时没有“汉堡”div。

使用DOMContentLoaded处理程序包装代码，见https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

Answer 2

据我所知，它说汉堡是空的。这会让我认为你的Javascript在加载DOM之前正在执行。

如果我是正确的，为了解决这个问题，您必须查看正在加载的订单。目前默认情况下，正在

加载javascript

String phoneNumber = "08000001066"; StringBuilder sb = new StringBuilder(phoneNumber) .insert(4," ") .insert(8," "); String output = sb.toString();。

<%= javascript_include_tag "application" %>

所以我会说移动

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title><%= content_for?(:title) ? yield(:title) : "Example" %></title>
    <%= stylesheet_link_tag    "application" %>
    <%= javascript_include_tag "vendor/modernizr" %>
    <%= csrf_meta_tags %>
  </head>

  <body>
    <%= render "static_pages/header" %>
    <%= yield %>
    <%= javascript_include_tag "application" %>
  </body>
</html>

下的

<%= javascript_include_tag "application" %>

行，看看是否有效。

Vanilla js还没有在我的rails应用程序上工作？

2 个答案: