JS绑定add to cart按钮点击无响应 控制台无日志输出

按优先级从高到低排查，90%的情况都是第一个问题导致的：

• 优先排查JS执行时机问题
  你当前的事件绑定逻辑是在JS加载时立刻获取.update-cart按钮，如果脚本放在页面<head>标签内、或者写在按钮DOM结构的前面，执行获取元素逻辑时浏览器还没渲染出按钮节点，拿到的元素集合是空的，循环根本不会给任何按钮绑定点击事件，自然点了没反应。
  两种修复方案二选一即可：
  1. 把绑定事件的JS脚本挪到整个页面的最底部，也就是</body>闭合标签之前，等所有DOM元素解析完成后再执行绑定
  2. 给JS逻辑加DOM加载完成监听，修改后的代码如下：

document.addEventListener('DOMContentLoaded', function() {
  var updateBtns = document.getElementsByClassName('update-cart')
  for (var i = 0; i < updateBtns.length; i++) {
    updateBtns[i].addEventListener('click', function() {
      var productId = this.dataset.product
      var action = this.dataset.action
      console.log('productId:', productId, 'action:', action)
    })
  }
})

• 第二步排查元素选择器匹配问题
  按F12打开浏览器开发者工具，切到Console面板，直接输入document.getElementsByClassName('update-cart')回车执行：
  • 如果返回的集合length为0，说明没匹配到目标按钮，去Elements面板找到对应按钮，检查class名有没有拼写错误（比如写成update_cart、updateCart、多打漏打字符），修正后保证选择器能匹配到元素
  • 如果返回的集合长度和页面上的购物车按钮数量一致，再往下排查
• 第三步排查元素点击被遮挡
  在页面上右键点击ADD TO CART按钮，选择「检查」选项，如果开发者工具高亮选中的元素不是你写的按钮，说明有z-index更高的透明元素（比如固定定位的遮罩、导航栏、弹窗层）盖在按钮上方，点击事件实际触发在了遮挡元素上，调整遮挡元素的定位、z-index值或者display属性即可。
• 额外代码规范修正
  你当前写的HTML有两处不符合规范，虽然不是导致点击失效的直接原因，但建议修正避免后续出问题：
  1. 不要在<p>标签内嵌套<h4>这类块级标题标签，浏览器会自动修正结构提前闭合p标签，可能导致布局异常
  2. 自定义属性的值最好包裹引号，避免模板渲染出特殊值时属性解析错误
     修正后的按钮相关HTML代码：

<div class="card-body">
  <h5 class="card-title fw-bold text-uppercase">{{product.name}}</h5>
  <h4 style="font-size: 1rem; padding: 0.3rem;opacity: 0.8;">$ {{product.price}} </h4>
  <button data-product="{{product.id}}" data-action="add" class="btn btn-outline-secondary add-btn update-cart">ADD TO CART</button>
</div>

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