Rails 6视图中点击按钮切换div显隐时addIngredients未定义如何解决

安全阿岳

2026-10-4

问题根因

你遇到的Uncaught ReferenceError: addIngredients is not defined错误是Webpacker的默认封装逻辑导致的：Webpack会将所有JS文件内的函数、变量默认限制在模块私有作用域，不会自动暴露到全局window对象，而HTML内联onclick事件只会在全局作用域查找对应函数，因此找不到你写在cocktails-show.js里的方法。

解决方案

方案1：快速修复（直接暴露函数到全局）

修改你的JS代码，将addIngredients函数挂载到window对象上即可：

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

方案2：规范实现（移除内联事件，用JS绑定监听）

更推荐这种方案，避免全局污染，也符合Webpack模块化设计逻辑：

先修改HTML按钮代码，删除onclick属性，新增id方便选择：

<button class="btn btn-dark btn-lg" id="add-ingredients-btn">Add Ingredients</button>

替换原有JS代码为事件监听逻辑：

document.addEventListener('DOMContentLoaded', function() {
  const addBtn = document.getElementById('add-ingredients-btn')
  const ingredientDiv = document.getElementById('ingredients')
  // 做存在性校验避免页面不存在对应元素时报错
  if (addBtn && ingredientDiv) {
    addBtn.addEventListener('click', function() {
      ingredientDiv.style.display = ingredientDiv.style.display === 'none' ? 'block' : 'none'
    })
  }
})