如何在addEventListener中添加判断条件 实现订单数量为0时提示错误

你原有代码存在6处影响运行的问题：

• DOM选择器不匹配：按钮id为btn，代码中写的选择器是#commander，且字符串缺少闭合引号，无法选中按钮节点
• 元素id拼写错误：总数量展示标签的id为total_qte，获取元素时写成了total_qty，无法匹配到对应节点
• 取值时机错误：页面加载初始就读取了span的内容赋值给total，后续商品数量变化时这个值不会更新，点击触发时拿到的永远是初始空值
• 语法错误：if判断条件内重复用var声明变量，错误提示字符串'error order缺少闭合单引号
• 类型不匹配：DOM节点的innerHTML返回值是字符串类型，直接和数字0比较会出现隐式转换bug
• 重复渲染问题：每次点击触发错误都追加新的p标签，会导致页面堆积多条重复报错

<!DOCTYPE html>
<html>
<body>

<button id="btn">验证订单</button>
<span id="total_qte">0</span> 
<script>
// 正确选中DOM节点
const btn = document.querySelector('#btn');
const totalQtyNode = document.getElementById('total_qte');
let errorTipNode = null;

// 绑定点击事件
btn.addEventListener('click', function(){
  // 点击时实时读取最新总数量，转成数字类型
  const totalQty = Number(totalQtyNode.innerHTML.trim());
  
  // 先清除上一次生成的错误提示
  if (errorTipNode) {
    errorTipNode.remove();
    errorTipNode = null;
  }

  // 数量为0时展示错误提示
  if (totalQty === 0) {
    errorTipNode = document.createElement('p');
    errorTipNode.innerText = '订单错误：商品总数量不能为0';
    document.body.appendChild(errorTipNode);
    // 此处可添加表单提交阻断逻辑
    return;
  }

  // 校验通过后执行正常订单提交逻辑
  console.log('订单校验通过，总商品数量：', totalQty);
});
</script>

</body>
</html>

• 所有动态变化的DOM值，必须在事件触发时实时读取，不要在初始化阶段固定赋值
• 从DOM拿到的文本内容默认是字符串类型，做数值比较前要显式做类型转换
• DOM选择器的id、类名必须和页面元素属性完全匹配，字符串、括号要成对闭合，避免基础语法错误
• 动态生成的提示类节点要做去重处理，避免重复渲染

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