如何实现多按钮分别复制对应促销码到剪贴板？

你遇到的问题确实是重复使用相同ID导致的——HTML中ID必须唯一，getElementById只会返回匹配的第一个元素，因此所有点击操作都只会复制第一个促销码。下面是具体的修改方案：

修改HTML代码 #

将重复的ID替换为class，并将每组按钮与对应促销码包裹在统一容器中，方便后续关联查找：

<!-- 促销码组1 -->
<div class="promo-group">
  <div class="accordionPromo">
    <button class="copy-btn">Get A Code</button>
  </div>
  <div class="panel">
    <p class="promo-code">Reds15</p>
  </div>
</div>

<!-- 促销码组2 -->
<div class="promo-group">
  <div class="accordionPromo">
    <button class="copy-btn">Get A Code</button>
  </div>
  <div class="panel">
    <p class="promo-code">Cub50</p>
  </div>
</div>

<!-- 剩余两组按上述结构依次添加 -->

修改JavaScript代码 #

通过class选择所有复制按钮，为每个按钮绑定独立的点击事件，点击时精准定位对应促销码：

// 获取所有复制按钮
const copyBtns = document.querySelectorAll('.copy-btn');

// 为每个按钮绑定点击事件
copyBtns.forEach(btn => {
  btn.addEventListener('click', function() {
    // 找到当前按钮对应的促销码元素
    const promoCode = this.closest('.accordionPromo').nextElementSibling.querySelector('.promo-code');
    // 复制文本到剪贴板
    navigator.clipboard.writeText(promoCode.innerText)
      .then(() => alert("Copied to clipboard"))
      .catch(e => alert(e.message));
  });
});

关键逻辑说明 #

• querySelectorAll('.copy-btn')：批量获取所有带有复制功能的按钮
• this.closest('.accordionPromo')：定位当前点击按钮所在的父容器
• nextElementSibling：获取父容器的下一个兄弟元素（即包含促销码的.panel容器）
• querySelector('.promo-code')：从.panel容器中提取对应的促销码文本

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