带有Rails应用程序的Javascript在头文件中工作，但在js文件中不工作

问题：

我正在尝试使用一个简单的javascript，如果单选按钮被标记为“是”，则显示

，如果单选按钮被标记为“否”，则隐藏。当我将javascript放入我的应用程序模板

文件时，它会工作，但当我将它放入外部.js文件时，它不会工作。我检查了编译后的application.js，代码显示出来，因此我知道我的external.js正在资产管道中加载

错误消息

我在控制台中加载窗口时遇到的错误是：

Uncaught TypeError: Cannot read property 'checked' of null
    at locationPicked (intake.js:3)
    at Object../app/javascript/custom/intake.js (intake.js:1)
    at __webpack_require__ (bootstrap:19)
    at Module.<anonymous> (application.js:18)
    at Module../app/javascript/packs/application.js (application.js:18)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83

代码

以下是ruby的版本和Gemfile中的主要Gem：

ruby '2.6.2'

gem 'rails',        '~> 6.0.2.2'
gem 'pg',           '>= 1.1.4',  '< 2.0'
gem 'puma',         '~> 4.2.1'
gem 'sass-rails',   '~> 6.0.0'
gem 'webpacker',    '~> 4.0.7'
gem 'uglifier',     '>= 4.2.0'
gem 'coffee-rails', '~> 5.0'
gem 'turbolinks',   '~> 5.2.1'
gem 'jbuilder',     '~> 2.9.1'
gem 'bootsnap',     '>= 1.4.5',             require: false

这是我的application.js：

// app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery')

import '../stylesheets/application'
import 'bootstrap'

document.addEventListener("turbolinks:load", () => {
    $('[data-toggle="tooltip"]').tooltip()
    $('[data-toggle="popover"]').popover()

})

//  Custom Scripts
require("custom/global")
require("custom/intake")

以上面列出的方式加载javascript时，会发生错误。当我在我的应用程序模板

部分中使用这样的javascript时，它会起作用：

// app/views/layouts/application.html.erb

<script type="text/javascript">
  function locationPicked() {
    if (document.getElementById("event_location_picked_yes").checked) {
        document.getElementById("LocationSelection").style.display = "";
    }
    else document.getElementById("LocationSelection").style.display = "none";
  }
</script>

//app/views/layouts/application.html.erb
函数locationPicked（）{
if（document.getElementById（“事件位置选择是”）.选中）{
document.getElementById（“LocationSelection”）.style.display=“”；
}
else document.getElementById（“LocationSelection”）.style.display=“无”；
}

问题

---

我的javascript非常生锈。这里的任何帮助都将不胜感激。我没有正确调用函数吗？我想可能是打字错误，但代码在

部分有效，所以我想我排除了这一点。提前感谢您的帮助。

尝试此代码并从app/views/layouts/application.html.erb中删除脚本

app/javascript/custom/admainment.js

$(document).on('turbolinks:load', function() {
  function locationPicked() {
    if (document.getElementById("event_location_picked_yes").checked) {
        document.getElementById("LocationSelection").style.display = "block";
    }
    else document.getElementById("LocationSelection").style.display = "none";
  }
});

---

我读这篇文章是因为我也有类似的问题。在写了15分钟询问你是否找到了解决方案后（在前几个小时试图找出答案后），我找到了答案；您需要删除

（）

，即

window.onload=locationPicked

我的JS也不太好，但在我的例子中，找不到
document.getElementById…
。我从你说的html.erb页面上包含的代码工作时得到了线索。我的也一样，我记得我以前曾用它来解决问题

window.onload = init; 
function init() {
 <JavaScript code which works on html.erb>
}

window.onload=init；
函数init（）{
}

在重写这篇文章时，我找到了以下解释：

该线程（@Ernest Friedman Hill）最简单的解释是：“当窗口加载完毕时，不带括号的运行函数。当赋值完成时，带括号的运行函数，比如在计算页眉时。”（搜索很容易，因为
window.onload=init
很常见，可以解释发生了什么。）但是我知道我需要等到页面加载后才能运行脚本吗？不

作为最后的测试，我添加了
（）
到我代码的第一行，页面不会完全加载，但没有控制台错误。我现在知道这是因为代码的含义不同。JS的乐趣！
你使用的是什么rails版本？对不起，@rock，我应该在我的问题中添加这个。我已经更新了我的问题，以包括相关版本。我的rails版本是6.0.2.2尽管如此。请尝试更改为导出默认函数locationPicked（）{

然后在

application.js

中也更改为

const locationPicked=require（“自定义/摄入”）

然后调用

window.onload=locationPicked（）
application.js
中的

，并删除

admainment.js

@dcangulo中的，这似乎不起作用。获取与未定义内容相同的错误。这不适用于浏览器错误

Uncaught ReferenceError:locationPicked未在HTMLInputElement中定义。onclick

// app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery')

import '../stylesheets/application'
import 'bootstrap'

document.addEventListener("turbolinks:load", () => {
    $('[data-toggle="tooltip"]').tooltip()
    $('[data-toggle="popover"]').popover()

})

//  Custom Scripts
require("custom/global")
require("custom/intake")

// app/views/layouts/application.html.erb

<script type="text/javascript">
  function locationPicked() {
    if (document.getElementById("event_location_picked_yes").checked) {
        document.getElementById("LocationSelection").style.display = "";
    }
    else document.getElementById("LocationSelection").style.display = "none";
  }
</script>

$(document).on('turbolinks:load', function() {
  function locationPicked() {
    if (document.getElementById("event_location_picked_yes").checked) {
        document.getElementById("LocationSelection").style.display = "block";
    }
    else document.getElementById("LocationSelection").style.display = "none";
  }
});

window.onload = init; 
function init() {
 <JavaScript code which works on html.erb>
}