Rails 5.2.0中CoffeeScript获取按钮innerText报null错误求助

嘿，这个问题我刚学Rails的时候也踩过一模一样的坑！

问题根源 #

你看到的“无法读取null的innerText属性”错误，本质是你的CoffeeScript代码跑得太早了——当脚本执行的时候，页面上的那个登录按钮还没被浏览器渲染出来呢！这时候document.getElementById("user_login_submission")找不到目标元素，就返回了null，你再去访问null的innerText属性，自然就报错了。

几种解决办法 #

我给你列几个实用的解决方案，挑你顺手的用就行：

1. 等DOM加载完再执行代码

把你的CoffeeScript逻辑包裹在DOM加载完成的回调里，确保元素已经存在后再操作：

document.addEventListener 'DOMContentLoaded', ->
  console.log "Hello"
  console.log document.getElementById("user_login_submission").innerText

2. 用jQuery（Rails默认自带）

Rails 5.2默认集成了jQuery，用它的就绪事件会更简洁，还能避免不少时序问题：

$ ->
  console.log "Hello"
  console.log $("#user_login_submission").text()

这里的$("#user_login_submission").text()和原生的innerText作用是一样的，jQuery还帮你处理了跨浏览器的兼容问题。

3. 把脚本放到页面底部

如果不想用事件监听，也可以调整脚本的加载位置——把你的CoffeeScript对应的JS文件引用放在ERB模板的</body>标签之前，这样页面所有元素都渲染完毕后，脚本才会执行。

小细节优化 #

另外你的ERB代码里多了不必要的反引号，直接写按钮标签就好：

<button class="user_login_submission" id="user_login_submission">login</button>

内容的提问来源于stack exchange，提问作者Shahab Ali