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:
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!
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;