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

Answer 2

如果</body>當前位於<head>中，請將腳本加載到</body>之前。 您的腳本引用的DOM內容很可能尚未出現。 在標記渲染后加載腳本應解決此問題，並為您的網站提供更好的速度。

另一種方法是將您的腳本包裝在DOMContentLoaded事件中，但通常您希望在任何一種情況下都將腳本保持在頁面的下方。

JavaScript無法在布局中查找元素

問題描述

2 個解決方案

解決方案1
3 已采納 2018-06-25 22:44:10

解決方案2
0 2018-06-25 22:50:37

JavaScript無法在布局中查找元素

問題描述

2 個解決方案

解決方案1 3 已采納 2018-06-25 22:44:10

解決方案2 0 2018-06-25 22:50:37

解決方案1
3 已采納 2018-06-25 22:44:10

解決方案2
0 2018-06-25 22:50:37