JavaScript动态生成按钮仅首个生效问题求助（附代码）

你的问题核心出在三个关键错误上：

• 重复ID违反HTML规则：生成的每个人员模块都使用了相同的id（如js-buttonChange、js-inputForName），HTML中id必须全局唯一，重复ID会导致选择器只能选中第一个匹配元素。
• 全局选择器的局限性：点击事件处理函数里用document.querySelector全局查找元素，只会返回第一个匹配项，因此只有第一个人的按钮能触发正确逻辑。
• 内联事件无法传递上下文：内联onclick无法区分点击的是哪一组按钮，无法关联对应的输入和显示元素。

修复步骤 #

1. 移除重复ID：删除模板中所有重复的id属性，仅用类名标识元素。
2. 绑定上下文事件：避免内联onclick，改为在生成DOM后为每个按钮绑定事件，通过元素上下文区分不同模块。
3. 重构处理函数：让函数接收当前按钮的容器上下文，操作对应模块内的元素，而非全局查找。

修改后的完整代码 #

const peopleArray = [];

function addPeople() {
  const inputForPeopleElement = document.querySelector('.howManyPeople');
  const people = Number(inputForPeopleElement.value);

  // 清空数组避免重复累加（原代码会保留之前的人数，此处修复）
  peopleArray.length = 0;
  for (let i = 1; i <= people; i++) {
    peopleArray.push(i);
  }

  inputForPeopleElement.value = '';
  howManyHours();
}

const acceptButton = document.getElementById('js-accept');
acceptButton.addEventListener('click', addPeople);
acceptButton.addEventListener('click', acceptedClickForPeople);

function acceptedClickForPeople() {
  const changeAcceptanceElement = document.querySelector('.accept');
  if (changeAcceptanceElement.innerText === 'Принять') {
    changeAcceptanceElement.innerText = 'Принято';
  }
  setTimeout(() => {
    changeAcceptanceElement.innerText = 'Принять';
  }, 1000);
}

// 重构为接收按钮元素的函数
function acceptedClickForName(button) {
  if (button.innerText === 'Сохранить') {
    button.innerText = 'Сохранено';
    setTimeout(() => {
      button.innerText = 'Сохранить';
    }, 1000);
  }
}

// 接收容器元素，操作对应模块内的输入和显示区域
function showTheName(container) {
  const inputElement = container.querySelector('.inputForName');
  const showElement = container.querySelector('.showName');
  showElement.innerHTML = `<p>${inputElement.value}</p>`;
}

function howManyHours() {
  let howManyHoursHtml = '';
  for (let i = 0; i < peopleArray.length; i++) {
    const html = `<p> ${i + 1} человек </p>
          <div class="timer">
          <input placeholder="Имя" class="inputForName">
          <button class="buttonChange"> Сохранить </button>
          <div>
          <p class="showName"> </p>
          </div>
          <input placeholder="Минуты">
          <button class="inputForTimer"> Сохранить </button>
          </div>`;
    howManyHoursHtml += html;
  }

  const container = document.querySelector('.js-howManyHours');
  container.innerHTML = howManyHoursHtml;

  // 为每个姓名保存按钮绑定事件，关联所属模块
  container.querySelectorAll('.buttonChange').forEach(button => {
    button.addEventListener('click', () => {
      const timerContainer = button.closest('.timer');
      acceptedClickForName(button);
      showTheName(timerContainer);
    });
  });

  // 可按需添加分钟保存按钮的事件逻辑
  container.querySelectorAll('.inputForTimer').forEach(button => {
    button.addEventListener('click', () => {
      // 此处添加分钟保存的处理逻辑
    });
  });
}

关键修改说明 #

• 数组清空：每次点击"Принять"时清空peopleArray，避免生成重复的人员模块。
• 移除重复ID：删除模板中所有重复的id属性，仅保留类名用于元素选择。
• 上下文绑定：生成DOM后，通过closest('.timer')获取当前按钮所属的模块容器，确保操作的是对应模块内的元素。
• 函数重构：处理函数不再全局查找元素，而是通过传入的按钮或容器参数，精准操作目标元素。

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