多HTML页面标签文本传递异常：重复ID导致仅获取首个产品名称

问题根源 #

你给多个产品的<a>标签用了相同的id="productName"，但HTML规范里ID必须唯一，document.getElementById()只会返回页面中第一个匹配该ID的元素，所以不管点哪个按钮，拿到的都是第一个产品的文本。

修复步骤 #

1. 修改html1的结构和按钮触发逻辑

把重复的id改成class，同时让按钮点击时把自身上下文传给sendData函数，这样就能定位到对应产品的文本：

<div class="shop-content">
  <a class="black productName">Product A</a>
  <button type="button" onclick="sendData(this);">
    <span class="price">Inquire</span>
  </button>
</div>

<div class="shop-content">
  <a class="black productName">Product B</a>
  <button type="button" onclick="sendData(this);">
    <span class="price">Inquire</span>
  </button>
</div>

<div class="shop-content">
  <a class="black productName">Product C</a>
  <button type="button" onclick="sendData(this);">
    <span class="price">Inquire</span>
  </button>
</div>

2. 重写html1的sendData函数

通过按钮的父容器找到对应的产品名称标签，再获取文本并跳转：

function sendData(btn) {
  // 找到按钮所在的shop-content容器，再获取里面的productName文本
  const productName = btn.parentElement.querySelector('.productName').textContent.trim();
  const url = `html2.html?productName=${encodeURIComponent(productName)}`;
  document.location.href = url;
}

3. 优化html2的参数解析逻辑（可选但更可靠）

原来的手动split解析URL参数容易出错，用URLSearchParams可以更简洁安全：

<input type="text" name="subject" placeholder="Subject*" id="productSubject" required />

<script>
window.onload = function () {
  const params = new URLSearchParams(window.location.search);
  const productName = params.get('productName');
  if (productName) {
    document.getElementById('productSubject').value = decodeURIComponent(productName);
  }
}
</script>

为什么这样改 #

• 用class代替重复的id，符合HTML规范，同时能批量选择同类元素
• 通过按钮的上下文(this)定位到对应产品容器，确保获取的是当前点击按钮所属的产品名称
• URLSearchParams是浏览器原生API，能处理各种特殊字符和复杂参数场景，比手动split更稳定

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