JavaScript中如何选择动态生成元素？点击Start后能否用getElementById选中选项？

Hey there! Let's break this down clearly for you:

为什么直接用getElementById不可行？ #

First off, you can't use getElementById to select each generated option button—HTML rules state that id attributes must be unique on a page. When you have multiple elements with the same id, getElementById will only return the first one it finds, so you can't target all your generated buttons this way.

On top of that, your current event listener for #choice runs when the page loads, but those buttons don't exist yet (they're created only when the Start button is clicked). That means that listener won't actually attach to any of the generated buttons.

两种可行的修改方案 #

方案1：给每个按钮分配唯一ID，动态绑定事件 #

We can give each generated button a unique id (like choice-1, choice-2, etc.), then attach event listeners right when we create them:

document.getElementById("start").addEventListener('click', function(){ 
  let html = ""; 
  for (let i=1; i<=4; i++){ 
    // 生成唯一ID
    const buttonId = `choice-${i}`;
    html += `<button id='${buttonId}'>choice${i}</button><br>`; 
  } 
  document.querySelector('.btn').innerHTML = html; 

  // 为每个新生成的按钮绑定事件
  for (let i=1; i<=4; i++){
    document.getElementById(`choice-${i}`).addEventListener('click', function(){ 
      console.log(this); 
    });
  }
}); 

方案2：使用事件委托（更推荐） #

Instead of attaching a listener to each button individually, we can attach a single listener to the parent container (.btn). This works because events bubble up, and we can check which button was clicked. This is more efficient, especially if you ever generate more buttons later:

document.getElementById("start").addEventListener('click', function(){ 
  let html = ""; 
  for (let i=1; i<=4; i++){ 
    // 用class标识选项按钮，替代重复的id
    html += `<button class='choice-btn'>choice${i}</button><br>`; 
  } 
  document.querySelector('.btn').innerHTML = html; 
}); 

// 给父容器绑定事件委托
document.querySelector('.btn').addEventListener('click', function(e){ 
  // 检查点击的元素是不是我们的选项按钮
  if (e.target.classList.contains('choice-btn')){
    console.log(e.target); 
  }
}); 

额外提示 #

• Always avoid duplicate id values in your HTML—they cause unexpected behavior and violate web standards.
• Event delegation is the preferred approach for dynamically created elements because it reduces the number of event listeners and works even if you add/remove elements later.

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