Javascript 香草js是'；你不在我的rails应用程序上工作吗？_Javascript_Ruby On Rails_Ruby

Javascript 香草js是'；你不在我的rails应用程序上工作吗？

javascript ruby-on-rails ruby

Javascript 香草js是'；你不在我的rails应用程序上工作吗？,javascript,ruby-on-rails,ruby,Javascript,Ruby On Rails,Ruby,我试图实现一个全屏菜单，我没有得到任何rails错误，但当我运行项目时，它根本不工作。我在检查元素时出现此错误： Cannot read property 'addEventListener' of null 这是我的js： (function() { var Menu = (function() { var burger = document.querySelector('.burger'); var menu = document.querySelector('.me

我试图实现一个全屏菜单，我没有得到任何rails错误，但当我运行项目时，它根本不工作。我在检查元素时出现此错误：

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

}());

（函数（）{
变量菜单=（函数（）{
var burger=document.querySelector（'.burger'）；
var menu=document.querySelector（'.menu'）；
var menuList=document.querySelector（'.menu\u list'）；
var brand=document.querySelector（“.menu__品牌”）；
var menuItems=document.querySelectorAll（'.menu__项'）；
var-active=false；
var toggleMenu=函数（）{
如果（！活动）{
menu.classList.add（'menu--active'）；
menuList.classList.add（'menu\u list--active'）；
brand.classList.add（'menu_ubrand--active'）；
burger.classList.add（'burger--close'）；
对于（变量i=0，ii=menuItems.length；i


这是我第一次使用vanilla——在rails中使用vanilla是否缺少额外的步骤？（通过“require”或其他方式？还是内置？谢谢
我的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>


AaP
正确%>
正确%>
阿什利/阿尔梅达
x





x


x


出现错误的原因是在加载和解析DOM之前执行了脚本。因此，此时没有“burger”div
使用DOMContentLoaded处理程序包装代码，
从我能看出的情况来看，burger是空的。这会让我认为您的Javascript是在加载DOM之前执行的
如果我是正确的，为了解决这个问题，你必须查看加载的顺序



所以我想说，移动
下的

行并查看是否有效。控制台中是否有错误？是否有任何类为“burger”的HTML元素？“未捕获的TypeError:无法读取null的属性'addEventListener'：）@PavelGatnar-是的，DOM准备好后是否运行JS？好的，因此我将代码添加到JS文件的顶部，现在我得到：Uncaught TypeError:无法读取null应用程序的属性“addEventListener”。self-40b20bf8c64be14ddd15703a095a78137b6078d743ab579da88d8b157be541f6.js:19 DOM已完全加载并解析
<!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>