JS获取标签值时报Cannot read property 'innerHTML' of null如何解决

错误原因 #

• 你在JS中使用document.getElementById("quantity")获取元素，但HTML里所有餐品的数量标签用的是class="quantity"，没有设置过id="quantity"的元素，所以该方法返回null，调用innerHTML就会抛出你遇到的类型错误。
• 另外你有3个不同的餐品，直接全局定义一个数量变量也无法对应不同餐品的独立计数需求。

修复方案 #

第一步：修改HTML点击事件逻辑 #

给每个加减按钮传入当前按钮对象，方便定位对应餐品的数量标签，修改所有按钮的onclick属性：

<button class="add" onclick="add(this)">+</button>
<p class="quantity">0</p>
<button class="minus" onclick="minus(this)">-</button>

第二步：重写JS逻辑 #

替换原有的JS代码即可实现基础的加减数量功能：

// 增加数量方法
function add(btn) {
  // 获取当前按钮相邻的数量标签
  const quantityEl = btn.nextElementSibling;
  let num = parseInt(quantityEl.innerHTML);
  num++;
  quantityEl.innerHTML = num;
}

// 减少数量方法
function minus(btn) {
  // 获取当前按钮相邻的数量标签
  const quantityEl = btn.previousElementSibling;
  let num = parseInt(quantityEl.innerHTML);
  // 限制最小数量为0，避免出现负数
  if(num > 0) {
    num--;
  }
  quantityEl.innerHTML = num;
}

可选优化：事件委托方案（更适合后续功能扩展） #

如果后续要新增大量餐品，不需要每个按钮都写onclick属性，直接用事件绑定方案更易维护：

1. 先删掉HTML中所有按钮的onclick属性
2. 替换JS代码为如下内容：

// 等待DOM完全加载后再绑定事件
document.addEventListener('DOMContentLoaded', function() {
  // 绑定所有加按钮的点击事件
  document.querySelectorAll('.add').forEach(btn => {
    btn.addEventListener('click', function() {
      const quantityEl = this.nextElementSibling;
      let num = parseInt(quantityEl.innerHTML);
      quantityEl.innerHTML = num + 1;
    })
  })
  // 绑定所有减按钮的点击事件
  document.querySelectorAll('.minus').forEach(btn => {
    btn.addEventListener('click', function() {
      const quantityEl = this.previousElementSibling;
      let num = parseInt(quantityEl.innerHTML);
      if(num > 0) {
        quantityEl.innerHTML = num - 1;
      }
    })
  })
})

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