application.js 中定义的函数不起作用答案

【问题标题】：Functions defined in application.js not workingapplication.js 中定义的函数不起作用
【发布时间】：2020-03-14 18:33:55
【问题描述】：

我正在开发一个 Rails 6 应用程序，我正在尝试将一些 Javascript 功能放入我的应用程序中。我正在使用的代码在非 Rails 模板上工作，但是当我将相同的代码放入 Rails 6 应用程序 application.js 文件夹时，Javascript 函数不起作用。

application.js

function hideButtin(){
  var element = document.getElementById("hide");
  element.style.display = 'none';
}

header.html.erb

<%= link_to "OWNER SIGN UP", signup_path, class: "button", onclick: "hideButtin()" %>

_form.html.erb

 <div id="hide">
   <%= f.check_box :owner %>
   <%= f.label :owner %>
 </div>

【问题讨论】：

标签： ruby-on-rails ruby-on-rails-6 webpacker

【解决方案1】：

是的，函数在 Rails 6 中不能像那样工作，你需要在 window 范围内添加它

function hideButtin(){
  var element = document.getElementById("hide");
  element.style.display = 'none';
}

window.hideButtin = hideButtin;

试一试。

【讨论】：

谢谢@Rajdeep。我添加了 window.hideButtin = hideButtin();还是不行。
我想你的意思是：window.hideButtin = hideButtin（没有括号）。
@rossta 我的错，刚刚编辑了我的答案。谢谢老兄。
@ZekariasZico 我已经编辑了我的答案，你能重试吗？

【解决方案2】：

为什么不直接写real event listener 而不是使用onclick？

document.addEventHandler('addEventListener', 'click', function(e){
  var other_element = document.getElementById("hide");
  if (e.target.matches('.hide_on_click') && other_element) {
     other_element.style.display = 'none';
  }
});

<%= link_to "OWNER SIGN UP", signup_path, class: "button hide_on_click" %>

它不会混合内容和行为，并且您不需要创建全局。如果您不想对要隐藏的元素的 id 进行硬编码，只需在目标中添加一个数据属性即可。

【讨论】：