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

Question

I'm trying to get the ids of dynamically created elements, now these elements are in the form of input fields that can be modified by the user (the user enters the number of players then he gets input fields to type in their names), I'm trying to get their values as well, here is what I'm trying to do:

// 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

There are a number of ways to go about it:

1. Add the inputs to an array as you create them
2. Add a unique class to each player input then use document.querySelectorAll('.className')
3. Select the inputs based on inputs with ID starting with "player"

Eg the following just adds "Player i" as the value of each input, but it could do other things.

 // 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>

You can reduce your code somewhat by:

1. The default type is "text" so no need to set it
2. Set attributes using property access
3. Append inputs as they're created

so:

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

I'm not a fan of using a place holder as the label, much better to have an actual label and use the placeholder as a hint, so:

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

or similar.