Javascript 无法使JS document.getElementById在my rails视图中工作

Javascript 无法使JS document.getElementById在my rails视图中工作,javascript,ruby-on-rails,Javascript,Ruby On Rails,在我的视图/user/index.html.erb中,我有: <div id="heading">There are <%= @user.length %> users in here</div> document.getElementById("heading").innerHTML = "No one here"; 然而,当我重新加载页面时,js代码段不起作用,文本保持不变。然而,当我在我的`stuff.js文件中放入alert(“test”)时,会弹

在我的
视图/user/index.html.erb
中,我有:

<div id="heading">There are <%= @user.length %> users in here</div>
document.getElementById("heading").innerHTML = "No one here";
然而,当我重新加载页面时,js代码段不起作用,文本保持不变。然而,当我在我的`stuff.js文件中放入
alert(“test”)
时,会弹出一个警报框,让我知道至少JavaScript正在被提取


getElementById
工作时我缺少了什么?

如果您将rails 5与
Turbolink 5
一起使用,则应使用此事件确保元素存在

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

如果您使用的是早期版本的Turbolink,请使用
page:load
而不是
Turbolink:load

如果您将rails 5与
Turbolink 5
一起使用,则应使用此事件以确保元素存在

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

如果您使用的是早期版本的Turbolink,请使用
page:load
而不是
Turbolink:load

看起来您是在DOM加载之前运行脚本。如果是这样的话,试着把对代码的调用放在body标签的末尾

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

...

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

这里有用户
...

看起来您正在DOM加载之前运行脚本。如果是这样的话,试着把对代码的调用放在body标签的末尾

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

...

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

这里有用户
...


您是否在等待DOM准备就绪?你能分享stuff.js代码吗?当然,我的stuff.js只有一行:document.getElementById(“heading”).innerHTML=“这里没有人”;这是一个测试项目,所以我故意使用以下方法将其最小化:
document.addEventListener(“DOMContentLoaded”,function(){document.getElementById(“heading”).innerHTML=“这里没有人”;})
要等待加载DOM,或者如果使用jQuery,请尝试使用
$(文档)。准备好了吗
我再次尝试了您的解决方案,不要认为我更改了任何其他内容,但现在它可以工作了!谢谢你的帮助,不客气。我很高兴它有帮助:)你在等DOM准备好吗?你能分享stuff.js代码吗?当然,我的stuff.js只有一行:document.getElementById(“heading”).innerHTML=“这里没有人”;这是一个测试项目,所以我故意使用以下方法将其最小化:
document.addEventListener(“DOMContentLoaded”,function(){document.getElementById(“heading”).innerHTML=“这里没有人”;})
要等待加载DOM,或者如果使用jQuery,请尝试使用
$(文档)。准备好了吗
我再次尝试了您的解决方案,不要认为我更改了任何其他内容,但现在它可以工作了!谢谢你的帮助,不客气。我很高兴它有帮助:)我只是把上面的内容添加到我的stuff.js文件中,仍然没有得到任何更改。我应该把它放在另一个文件里吗?或者,如果元素不存在,我是否应该检查某个地方是否有错误警报?您使用的Rails和TurboLink的版本是什么?不,你应该把它放在stuff.js文件中。对于错误,您可以检查浏览器控制台,或者只使用
alert()
进行调试。我的Rails版本是5.0.0.1,TurboLink是“~>5”。我现在将阅读如何使用浏览器控制台查找JS错误…这是服务器日志而不是控制台日志。您可以通过在浏览器(Chrom或Firefox)中按F12打开浏览器控制台,然后按
控制台
,如果有错误,您将在那里找到它。重新加载时,控制台不会显示任何错误。我想这一定是因为JS启动得太早,无法检测到元素。我刚刚将上述内容添加到stuff.JS文件中,仍然没有得到任何更改。我应该把它放在另一个文件里吗?或者,如果元素不存在,我是否应该检查某个地方是否有错误警报?您使用的Rails和TurboLink的版本是什么?不,你应该把它放在stuff.js文件中。对于错误,您可以检查浏览器控制台,或者只使用
alert()
进行调试。我的Rails版本是5.0.0.1,TurboLink是“~>5”。我现在将阅读如何使用浏览器控制台查找JS错误…这是服务器日志而不是控制台日志。您可以通过在浏览器(Chrom或Firefox)中按F12打开浏览器控制台,然后按
控制台
,如果有错误,您将在那里找到它。重新加载时,控制台不会显示任何错误。我想这一定是因为JS启动太早,无法检测到元素。你是对的,我的脚本在加载DOM之前运行,我尝试将脚本放在末尾,但没有效果。上面的解决方案,添加document.addEventListener(“DOMContentLoaded”…实现了这一点。无论如何,感谢你的建议。你是对的,我的脚本在加载DOM之前运行,我尝试将脚本放在末尾,但没有效果。上面的解决方案,添加document.addEventListener(“DOMContentLoaded”…但还是成功了。无论如何,谢谢你的建议。