Tengo una vista correspondiente a una página de presentación de la mesa de cócteles que tiene un div que muestra los ingredientes del cóctel. En la vista, tengo un botón que al hacer clic debería abrir un formulario para agregar ingredientes en el div que contiene la lista de ingredientes. Ya apliqué con éxito AJAX a la lista de ingredientes, pero tengo problemas para ocultar y mostrar el div con el botón y recibo el siguiente error en la terminal:
Mi código hasta ahora se ve así:
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>El código que ingresé parece estar funcionando solo en el desbordamiento de pila, por lo que supongo que el problema podría estar relacionado con webpacker. Agradecería cualquier idea que me puedan brindar. Si tiene alguna pregunta, por favor hágamelo saber. ¡Gracias!
Para poder ejecutar funciones desde atributos como 'onclick', las funciones deben ser globales.
Entonces debe asignarlo a la window (que es el objeto global en el navegador):
function addIngredients() { let ingredient = document.getElementById("ingredients"); if (ingredient.style.display === "none") { ingredient.style.display = "block"; } else { ingredient.style.display = "none"; } } window.addIngredients = addIngredients;