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

娟C

我有一个与 Cocktail table 显示页面相对应的视图,该页面有一个显示鸡尾酒成分的 div。在视图中,我有一个按钮,单击该按钮应打开一个表单,以在包含成分列表的 div 中添加成分。我已经成功地将 AJAX 应用于成分列表,但是我无法使用按钮隐藏和取消隐藏 div,并且在终端上出现以下错误:

  • 未捕获的 ReferenceError:在 HTMLButtonElement.onclick 中未定义 addIngredients (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 上。我将不胜感激您能提供给我的任何见解。如果您有任何问题,请告诉我。谢谢!

改写

为了能够从“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;

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在div上使用“ keydown”事件侦听器?

如何在事件侦听器上获取第一个 div 元素

如何在一个div的所有子节点和这些div的数组中添加事件侦听器?

如何向使用 ES6 模板文字创建的元素添加函数/事件侦听器?

如何添加事件侦听器来确定单击 div 内的坐标?

如何添加事件侦听器以等待在任何地方单击并关闭 div

如何在JOptionPane的“确定”按钮上添加侦听器?

如何创建检查div元素样式的事件侦听器?

如何使用react和typescript将事件侦听器添加到使用ref访问的div元素?

使用相同的按钮隐藏和取消隐藏div

事件侦听器未在 DIV 中的第二个按钮上触发

Ruby On Rails:如何显示/隐藏单选按钮的相关div

如何基于角度6中的单选按钮显示/隐藏div?

jQuery-添加新的div事件侦听器

如何在jquery的sweetalert对话框中为html按钮添加事件侦听器

如何在隐藏的 <div> 上方添加 <div>

如何在文档查看器中的“完成”按钮上添加侦听器

如何将事件侦听器添加到JavaScript中的许多按钮?

如何添加由脚本创建的每个按钮点击侦听器事件?

如何为所有按钮添加一个事件侦听器

如何将多个事件侦听器添加到一个按钮?

如何将事件侦听器添加到单选按钮 - 地雷不触发

如何将事件侦听器添加到<input type = number>的默认箭头按钮

如何将事件侦听器添加到仅按钮元素

JS:隐藏元素上的事件侦听器

带单选按钮的隐藏/取消隐藏div

如何在Angular 6+中将事件侦听器正确附加到全局“窗口”?

如何在尚未在 DOM [no-jQuery] 中的元素上添加事件侦听器?

如何在Rails 6的视图中使用JQueryUI