無法獲取JS的document.getElementById工作在我的軌道查看

在我views/user/index.html.erb，我有：無法獲取JS的document.getElementById工作在我的軌道查看

<div id="heading">There are <%= @user.length %> users in here</div>

在我assets/javascripts/stuff.js，我有：

document.getElementById("heading").innerHTML = "No one here";

然而，當我重新加載頁面，js片段不起作用，文本不變。但是，當我將alert("test")放入我的`stuff.js文件中時，會彈出一個警告框，讓我知道至少JavaScript正在被拾取。

我錯過了什麼getElementById工作？

來源

2016-12-27 MLZ

您是否在等待DOM準備好？你能分享stuff.js代碼嗎？ –

當然，我的stuff.js只有一行： document.getElementById（「heading」）。innerHTML =「這裏沒人」; 這是一個試驗項目，所以我刻意地保持它的最小 – MLZ

嘗試使用：'document.addEventListener（「DOMContentLoaded」，函數（）{ 的document.getElementById（「標題」）的innerHTML = 「這裏沒有一個」; 。}）; '等待DOM加載或使用，如果您使用jQuery嘗試'$（document）.ready' https://learn.jquery.com/using-jquery-core/document-ready/ –

如果您使用rails 5和Turbolink 5，則應該使用此事件以確保該元素在那裏。

document.addEventListener("turbolinks:load", function() { 
    document.getElementById("heading").innerHTML = "no one here"; 
});

如果您正在使用的TurboLink的先前版本使用page:load代替turbolinks:load

來源

2016-12-27 20:38:48

我剛剛添加上面到我的stuff.js文件，仍然沒有改變。我應該把它放在不同的文件？或者如果元素不在那裏，我應該檢查某個地方是否有錯誤警報？ – MLZ

您使用的Rails和Turbolinks的版本是什麼？不，你應該把它放在你的stuff.js文件中。對於錯誤，您可以檢查您的瀏覽器控制檯，或者僅使用alert（）進行調試。 –

我的Rails版本是5.0.0.1，Turbolinks是'〜> 5'。我將閱讀如何使用瀏覽器控制檯來查找JS錯誤... – MLZ

看起來像你的DOM加載之前運行腳本。如果是這種情況，請嘗試將呼叫發送到您的代碼的最後。

<body> 
<div id="heading">There are <%= @user.length %> users in here</div> 

... 

<script src="assets/javascripts/stuff.js"></script> 
</body>

來源

2016-12-27 20:46:24

你說得對，我的腳本是在DOM加載之前運行的，我試着把腳本放在最後，但它沒有任何效果。上面的解決方案，添加document.addEventListener（「DOMContentLoaded」...雖然做了伎倆。無論如何謝謝你的建議。 – MLZ

無法獲取JS的document.getElementById工作在我的軌道查看

回答

相關問題