自动贩卖机页面按钮点击报错：函数未定义问题求助

嘿，看你这自动贩卖机页面的代码，应该是点击加减按钮的时候浏览器报stockminus或者stockplus函数未定义的错误吧？我帮你分析下问题根源，再给你两个实用的解决办法～

问题根源 #

你在HTML里用了内联的onclick调用函数，但你的script.js是用type="module"引入的——模块脚本有自己独立的作用域，里面定义的函数默认不会挂载到全局的window对象上，所以HTML里的按钮根本找不到这些函数。另外我还发现你部分按钮的函数调用参数数量不一致（比如Skittles传了5个参数，M&M's只传了3个），就算函数能找到，后续也可能出逻辑错误，这个也要注意哦。

解决方案一：把函数暴露到全局 #

最简单的办法就是让script.js里的函数成为全局函数，直接挂载到window对象上就行：

// 在你的script.js里修改函数定义
window.stockminus = function(stockId, numId, itemName, price = 0, imgSrc = '') {
  // 这里写你原来的减库存逻辑
}

window.stockplus = function(stockId, numId, itemName, price = 0, imgSrc = '') {
  // 这里写你原来的加库存逻辑
}

我给参数加了默认值，这样就算有些按钮没传全参数也不会直接报错啦。

解决方案二：用事件委托绑定事件（更推荐） #

内联onclick其实不太符合现代前端的最佳实践，用事件委托的方式更优雅，还能避免作用域问题：

1. 先把HTML里所有按钮的onclick属性去掉，给按钮加统一的类名和自定义属性存参数：

<!-- 比如Skittles的减号按钮改成这样 -->
<button class="item-btn item-minus" 
        data-stock="skittelstock" 
        data-num="sktnum" 
        data-name="Skittles" 
        data-price="100" 
        data-img="res/snacks/skittels.jpg">
  <i class="fa fa-minus-circle"></i>
</button>
<!-- 加号按钮改成这样 -->
<button class="item-btn item-plus" 
        data-stock="skittelstock" 
        data-num="sktnum" 
        data-name="Skittles" 
        data-price="100" 
        data-img="res/snacks/skittels.jpg">
  <i class="fa fa-plus-circle"></i>
</button>

2. 然后在script.js里用事件委托来监听按钮点击：

document.addEventListener('DOMContentLoaded', () => {
  // 给整个页面绑定点击事件，通过类名判断是不是目标按钮
  document.body.addEventListener('click', (e) => {
    const targetBtn = e.target.closest('.item-btn');
    if (!targetBtn) return;

    // 从自定义属性里取出参数
    const stockId = targetBtn.dataset.stock;
    const numId = targetBtn.dataset.num;
    const itemName = targetBtn.dataset.name;
    const price = Number(targetBtn.dataset.price);
    const imgSrc = targetBtn.dataset.img;

    // 判断是加还是减，执行对应逻辑
    if (targetBtn.classList.contains('item-minus')) {
      stockminus(stockId, numId, itemName, price, imgSrc);
    } else if (targetBtn.classList.contains('item-plus')) {
      stockplus(stockId, numId, itemName, price, imgSrc);
    }
  });

  // 定义你的核心函数（不用暴露到全局啦）
  function stockminus(stockId, numId, itemName, price, imgSrc) {
    // 你的减库存逻辑
    console.log(`减少${itemName}的数量`);
    // 比如获取库存元素和数量元素，修改数值
    const stockEl = document.getElementById(stockId);
    const numEl = document.getElementById(numId);
    // ...你的原有逻辑
  }

  function stockplus(stockId, numId, itemName, price, imgSrc) {
    // 你的加库存逻辑
    console.log(`增加${itemName}的数量`);
    // ...你的原有逻辑
  }
});

这种方式不仅解决了作用域问题，后续新增商品按钮也不用再写重复的onclick，维护起来更方便～

备注：内容来源于stack exchange，提问作者BALAVINAYAKAM D