在 Rails 6 视图中，如何在隐藏和取消隐藏 div 的按钮上添加事件侦听器？

Question

我有一个对应于鸡尾酒 table 展示页面的视图，其中有一个 div 显示鸡尾酒配料。在视图中，我有一个按钮，单击该按钮应打开一个表单以在包含成分列表的 div 中添加成分。我已经成功地将 AJAX 应用于配料表，但我无法使用按钮隐藏和取消隐藏 div，并且我在终端上收到以下错误：

未捕获的 ReferenceError：未定义 addIngredients 在 HTMLButtonElement.onclick (17:26)

到目前为止，我的代码如下所示：

function addIngredients() {
  let ingredient = document.getElementById("ingredients");
  if (ingredient.style.display === "none") {
    ingredient.style.display = "block";
  } else {
    ingredient.style.display = "none";
  }
}

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-6 section" id="cocktail">
        <h1><%= @cocktail.name%></h1>
        <%= cl_image_tag @cocktail.photo.key, height: 300, width: 400, crop: :fill %>
        <% if @cocktail.ingredients.blank? %>
            Please add the ingredients <%= @cocktail.name %>
        <% else %>
          <% @cocktail.ingredients.each do |ingredient| %>
            <p><%= ingredient.name %>:<%=ingredient.quantity %> <%=ingredient.unit%></p>
          <% end %>
        <% end %>
        <button class="btn btn-light btn-lg"><%= link_to "Cocktail List", cocktails_path %></button>
        <button class="btn btn-dark btn-lg" onclick="addIngredients()">Add Ingredients</button>
      </div>
      <div class="col-6 section" id="ingredients">
        <h2>Ingredients</h2>
        <%= simple_form_for([ @cocktail, @ingredient ], remote: true) do |f| %>
          <%= f.input :name %>
          <%= f.input :quantity %>
          <%= f.input :unit %>
          <%= f.button :submit %>
        <% end %>
      </div>
    </div>
  </div>
  <%= javascript_pack_tag 'cocktails-show' %>
</body>

我输入的代码似乎只适用于堆栈溢出，所以我猜测问题可能出在 webpacker 上。如果您能提供给我任何见解，我将不胜感激。如果您有任何问题，请告诉我。谢谢！

Answer 1

为了能够运行从像 'onclick' 这样的属性中发挥作用，这些功能必须是全局的。

所以你必须将它分配给window（这是浏览器中的全局对象）：

function addIngredients() {
  let ingredient = document.getElementById("ingredients");
  if (ingredient.style.display === "none") {
    ingredient.style.display = "block";
  } else {
    ingredient.style.display = "none";
  }
}

window.addIngredients = addIngredients;

在 Rails 6 视图中，如何在隐藏和取消隐藏 div 的按钮上添加事件侦听器？

On a Rails 6 view, how can I add an event listener on a button which hides and unhides a div?

javascript

ruby-on-rails

webpacker