获取动态创建元素的 id 和 value

Question

我正在尝试获取动态创建元素的 id，现在这些元素采用用户可以修改的输入字段的形式（用户输入玩家数量，然后他获取输入字段以输入他们的名称），我也在尝试获取它们的值，这就是我想要做的：

// Creating the input fields
const x = localStorage.getItem('playersNum');
const parentDiv = document.getElementById('player-list');
for (let i = 0; i < x; i++) {
  const newInput = document.createElement("INPUT");
  newInput.setAttribute("type", "text");
  newInput.setAttribute("class", "form-control");
  newInput.setAttribute("id", `player${i}`);
  newInput.setAttribute("placeholder", "Player's Name");

  parentDiv.appendChild(newInput);
}

// Trying to access them
const players = document.getElementById('player-list').children;
console.log(players.value);

Answer 1

有很多方法可以解决：

1. 在创建时将输入添加到数组中
2. 为每个玩家输入添加一个唯一的类，然后使用document.querySelectorAll('.className')
3. 根据 ID 以“player”开头的输入选择输入

例如以下只是添加“Player i”作为每个输入的值，但它可以做其他事情。

// Creating the input fields
// const x = localStorage.getItem('playersNum');
let x = 3;
let parentDiv = document.getElementById('player-list');
for (let i = 0; i < x; i++) {
  let newInput = document.createElement("INPUT");
  newInput.setAttribute("type", "text");
  newInput.setAttribute("class", "form-control");
  newInput.setAttribute("id", `player${i}`);
  newInput.setAttribute("placeholder", "Player's Name");
  parentDiv.appendChild(newInput);
  parentDiv.appendChild(document.createElement('br'));
}

// Get a static NodeList of inputs with ID starting with "player"
let players = document.querySelectorAll('input[id^=player]');
// Iterate over list, adding a value
players.forEach((player, i) => player.value = 'Player ' + i);

div {border: 1px solid #aaaaaa}

<div id="player-list">
</div>

您可以通过以下方式减少代码：

1. 默认类型为“文本”，无需设置
2. 使用属性访问设置属性
3. 在创建时附加输入

所以：

let newInput = parentDiv.appendChild(document.createElement("INPUT"));
newInput.class = 'form-control';
newInput.id = `player${i}`;
newInput.placeholder = 'Player\'s Name';

我不喜欢使用占位符作为标签，最好有一个实际的标签并使用占位符作为提示，所以：

<label for="player0">Name player 0:<input id="player0" class="form-control"></label>

或类似的。