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

Answer 2

如果脚本当前在</body>中，请在<head>之前加载脚本。您的脚本引用的DOM内容很可能还不存在。在标记渲染后加载脚本应该可以解决此问题，并为您的网站提供更好的速度。

另一种方法是将脚本包装在DOMContentLoaded事件中，但是通常情况下，无论哪种情况，您都希望将脚本保持在页面下方。

JavaScript在布局中找不到元素

2 个答案: