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

Time:09-21

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;
  • Related