JS好友添加功能按钮异常：仅首个动态生成卡片按钮生效

我开发了一个简易的好友添加/移除网站，通过JavaScript动态生成3个好友卡片，每个卡片包含Send Request按钮。但目前所有按钮仅能修改首个卡片的状态文本，其余卡片的按钮点击后无响应，只会改变第一个卡片的内容。

原代码 #

JavaScript代码

var arr = [{
    name: "Raju",
    image: "./1.jpg",
    status: "Stranger"
  },
  {
    name: "Shyam",
    image: "./2.jpg",
    status: "Stranger"
  },
  {
    name: "Babu Bhaiya",
    image: "./3.jpg",
    status: "Stranger"
  },
];

var cluster = "";
arr.forEach(function(val) {
  cluster = cluster + ` 
    <div id="card"> 
    <img src="${val.image}" alt="">
    <h1>${val.name}</h1>
    <p>${val.status}</p>
    <button>Send Request</button>
    </div>
  `;
});

//Button Functionality
document.getElementById("cluster").innerHTML = cluster;

const btn = document.querySelectorAll("button");
var fact = 0;

btn.forEach((btn) => {
  btn.addEventListener("click", function() {
    if (fact == 0) {
      var timer = setTimeout(() => {
        document.querySelector("p").textContent = "Friend";
        document.querySelector("p").style.color = "rgb(66, 178, 113)";
        document.querySelector("button").textContent = "Cancel";
      }, 2000);
      fact = 1;
      document.querySelector("p").textContent = "Request Pending";
      document.querySelector("button").textContent = "Send Request";
    } else {
      clearTimeout(timer);
      fact = 0;
      document.querySelector("p").textContent = "Stranger";
      document.querySelector("p").style.color = "rgb(221, 66, 66)";
      document.querySelector("button").textContent = "Send Request";
      fact = 0;
    }
  });
});

HTML代码

<div class="container">
  <div id="cluster" class="box"></div>
</div>

问题原因 #

1. 全局选择器限制：document.querySelector("p")和document.querySelector("button")只会返回页面中第一个匹配的元素，导致无论点击哪个按钮，都只能修改第一个卡片的内容。
2. 全局状态冲突：fact和timer是全局变量，所有按钮共享同一状态，无法独立控制每个卡片的请求流程。
3. 重复ID违规：所有卡片使用相同的id="card"，HTML规范要求ID必须唯一，会导致DOM选择行为不可预测。

修复方案 #

1. 基于父元素定位当前卡片：通过this.parentElement获取按钮所在的卡片容器，再在容器内选择对应的状态文本和按钮，确保修改的是当前卡片的内容。
2. 独立状态存储：为每个按钮通过闭包保存专属的fact和timer变量，避免全局状态冲突。
3. 修正ID问题：将id="card"改为class="card"，符合HTML规范。

修复后的代码 #

JavaScript代码

var arr = [{
    name: "Raju",
    image: "./1.jpg",
    status: "Stranger"
  },
  {
    name: "Shyam",
    image: "./2.jpg",
    status: "Stranger"
  },
  {
    name: "Babu Bhaiya",
    image: "./3.jpg",
    status: "Stranger"
  },
];

var cluster = "";
arr.forEach(function(val) {
  cluster = cluster + ` 
    <div class="card"> 
    <img src="${val.image}" alt="${val.name}">
    <h1>${val.name}</h1>
    <p>${val.status}</p>
    <button>Send Request</button>
    </div>
  `;
});

document.getElementById("cluster").innerHTML = cluster;

const buttons = document.querySelectorAll("button");

buttons.forEach((btn) => {
  // 为每个按钮初始化独立状态
  let fact = 0;
  let timer = null;

  btn.addEventListener("click", function() {
    // 获取当前按钮所在的卡片容器
    const card = this.parentElement;
    const statusText = card.querySelector("p");
    const currentBtn = card.querySelector("button");

    if (fact === 0) {
      timer = setTimeout(() => {
        statusText.textContent = "Friend";
        statusText.style.color = "rgb(66, 178, 113)";
        currentBtn.textContent = "Cancel";
      }, 2000);
      fact = 1;
      statusText.textContent = "Request Pending";
      statusText.style.color = "";
      currentBtn.textContent = "Cancel Request";
    } else {
      clearTimeout(timer);
      fact = 0;
      statusText.textContent = "Stranger";
      statusText.style.color = "rgb(221, 66, 66)";
      currentBtn.textContent = "Send Request";
    }
  });
});

HTML代码

<div class="container">
  <div id="cluster" class="box"></div>
</div>

额外优化点 #

• 为图片添加有意义的alt属性，提升页面可访问性
• 等待状态下将按钮文本改为"Cancel Request"，逻辑更清晰
• 重置状态文本颜色，避免状态切换后颜色残留

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