JavaScript 在布局中找不到元素

Question

我有一个 ruby​​ on rails 程序，它在应用程序布局中显示 flash 消息:

<% if flash[:notice] %>
   <p id="notice">
      <span id="notice-button-left">[-]</span>
      <%= flash[:notice] %>
      <span id="notice-button-right">[-]</span>
   </p>
<% end %>

然后点击 <spans> #notice-button-left 和#notice-button-right，我想要 <p>消失所以我添加了代码:

document.getElementById("notice-button-right").addEventListener("click", function(){
    document.getElementById("notice").style.display = "none";
});

document.getElementById("notice-button-left").addEventListener("click", function(){
    document.getElementById("notice").style.display = "none";
});

到<script>标记并将其放入 application.html.erb 布局中。这非常有效。然而，当我取出 <script>标记并将 js 放入它停止工作的 app/assets/javascripts 文件夹中的 .js 文件中。检查浏览器时，它似乎找到了 js 文件，但 js 无法正常工作。

注意一:我有另一个正在运行的脚本

注二:我关闭了turbolinks

我想要的是让脚本正常工作，并让通知在单击跨度时消失。

Answer 1

尝试将您的 javascript 代码包装在一个准备好的文档中，因为看起来您没有使用 jQuery，像这样的东西应该可以在 app/assets/javascripts 文件夹中工作:

document.addEventListener("DOMContentLoaded", function(event) { 
  document.getElementById("notice-button-right").addEventListener("click", 
    function(){
      document.getElementById("notice").style.display = "none";
    });

  document.getElementById("notice-button-left").addEventListener("click", 
    function(){
      document.getElementById("notice").style.display = "none";
    });
});