Я пытаюсь получить все идентификаторы кнопок из родительского контейнера и всегда получать последний

Question

Я пытаюсь получить список всех идентификаторов от детей из родительского контейнера, и я продолжаю получать только последний идентификатор. Как я могу получить массив или строку со всеми идентификаторами? Эти кнопки будут динамически создаваться PHP, поэтому я не знаю, какой там будет идентификатор.

var childDivs = document.getElementById('onlineDrop').getElementsByTagName('button');
for (var i = 0; i < childDivs.length; i++) { 
childDiv = childDivs[i].id;
}
alert(childDiv);

<div id="onlineDrop">
<button id="222222"></button>
<button id="333333"></button>
<button id="444444"></button>
</div>

Не спрашивайте, пожалуйста. Заранее спасибо.

Answer 1

Другим подходом для этого может быть использование Array.from () метод массивов:

var childDivs = document.getElementById('onlineDrop').getElementsByTagName('button');

let ids = Array.from({length: childDivs.length}, (v, i) => childDivs[[i]].id);

console.log(ids);

<div id="onlineDrop">
<button id="222222">B1</button>
<button id="333333">B2</button>
<button id="444444">B3</button>
</div>

Answer 2

Добавить идентификаторы в массив.

var childDivs = document.getElementById('onlineDrop').getElementsByTagName('button');
childIds = [];

for (var i = 0; i < childDivs.length; i++) {
  childIds.push(childDivs[i].id);
}
console.log(childIds);

<div id="onlineDrop">
  <button id="222222"></button>
  <button id="333333"></button>
  <button id="444444"></button>
</div>