JavaScript点击按钮时submitPledge函数无法运行问题求助

• 首先是行内onclick绑定不生效的原因：你HTML中写的onclick="submitPledge(this)"，传入函数的第一个参数是当前按钮的DOM元素，不是事件对象，函数中调用e.target时会直接报错中断执行，看起来就像函数完全没响应。如果要在行内绑定中传入事件对象，要改成onclick="submitPledge(event)"。
• 直接用addEventListener("click", submitPledge)不生效不是事件对象没传，浏览器会自动把事件对象作为第一个参数传给回调函数，触发不响应是因为你的代码本身有两处逻辑错误导致执行中断：
  1. validate函数逻辑缺陷：无论点击哪个档位的提交按钮，都会强制读取pledge2和pledge3的value进行校验，如果你点击pledge1提交，只要这两个输入框不存在、或者值小于校验阈值，validate直接返回false，就会走到alert("Not working!")分支，看起来就像功能没生效。
  2. 剩余库存更新代码错误：初始代码中remains.innerHTML = Number(remains) - 1里，remains是querySelector返回的DOM对象，直接转Number会得到NaN，赋值操作会直接报错中断函数执行。
• 修复建议：
  1. 改造validate函数，根据当前提交的档位做对应校验，不要强制校验所有档位：

  function validate(pledgeLevel, inputValue) {
    const limitMap = {
      pledge1: 1,
      pledge2: 25,
      pledge3: 75
    }
    if (Number(inputValue) < limitMap[pledgeLevel]) {
      alert(`Pledge must be $${limitMap[pledgeLevel]} or higher`)
      return false
    }
    return true
  }
  

  2. 修复库存更新逻辑，读取DOM的innerHTML再做数值计算：

  // 错误写法
  remains.innerHTML = Number(remains) - 1;
  // 正确写法
  remains.innerHTML = Number(remains.innerHTML) - 1;
  

  3. 直接绑定submitPledge作为事件回调即可，不需要手动传e，浏览器会自动注入事件对象。

内容的提问来源于stack exchange，提问作者Kamari