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

I have a view corresponding to a Cocktail table show page which has a div displaying cocktail ingredients. In the view, I have a button that on click should open a form to add ingredients in the div containing the ingredient list. I have already successfully applied AJAX to the ingredient list but I am having trouble hiding and unhiding the div with the button and I am getting the following error on the terminal:

Uncaught ReferenceError: addIngredients is not defined at HTMLButtonElement.onclick (17:26)

My code so far looks like this:

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>

The code I input seems to be working only on stack overflow, so I am guessing the problem might be with webpacker. I would appreciate any insight you can provide me. If you have any questions please let me know. Thank you!

CodePudding user response：

To be able to run functions from attributes like 'onclick', the functions must be global.

So you have to assign it to window (which is the global object in the browser):

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

window.addIngredients = addIngredients;