Create an array from 'for of' loop outputs

Question

I have a for of statement in JS that returns HTML element ids but they are in multiple outputs. I would like to take these outputs and put them in an array.

For example the HTML is:

<div>
    <button id="savebtn-1"></button>
</div>
<div>
    <button id="savebtn-2"></button>
</div>

and my JS is:

const elements = document.querySelectorAll("button");
for (const element of elements) {
    let id = elements.getAttribute("id");
}

console.log(id) will show:

savebtn-1

savebtn-2

How can I get these outputs into an array?

Thanks for any attention you may give this question.

You already have the elements in the list, why to mess with the ids ..? — Teemu
– Teemu, Commented Sep 28, 2022 at 5:54
The buttons save a a text area value to the local storage. I have nine buttons and all nine are working to that effect. I t's just a stupid amount of redundancy that I have written for each button. I want to iteratively apply the event listener to each button. — C Dub
– C Dub, Commented Sep 28, 2022 at 6:18
I'm thinking that looping through an array will achieve this — C Dub
– C Dub, Commented Sep 28, 2022 at 6:19
Umm ... You can iterate the NodeList, and add event listeners. It sounds like you could make your code much simple by using event delegation. Ids are purposed to be used for elements not related to each other in any way, these savebuttons are more like a class of buttons. — Teemu
– Teemu, Commented Sep 28, 2022 at 6:23
Teemu, I really appreciate your time. You have given me much to chew on. I am a mental infant in this space but I am enjoying the growing pains. You rock my friend! Keep making the world a better place. — C Dub
– C Dub, Commented Sep 28, 2022 at 16:44

John Mack · Accepted Answer · 2022-09-28 06:00:13Z

3

Make another array and store all the id's inside that array.

const resultArray = [];
const elements = document.querySelectorAll("button");

for (const element of elements) {
    const id = element.getAttribute("id");
    resultArray.push(id);
}
console.log(resultArray);

<div>
<button id = "savebtn-1">Button 1</button>
</div>
<div>
<button id = "savebtn-2">Button 2</button>
</div>

edited Sep 28, 2022 at 6:00

answered Sep 28, 2022 at 5:58

John Mack

735 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

C Dub Over a year ago

You rock Mr. Mack! Super helpful

C Dub Over a year ago

Thanks yogi. I had a supervisor tell me that I like to do things the hard way... yep. I appreciate you keeping to the context of the question.

Phil · Accepted Answer · 2022-09-28 05:55:42Z

1

Use Array.from() on the NodeList and a custom mapper to extract the IDs

const idArray = Array.from(
  document.querySelectorAll("button"),
  ({ id }) => id
);

console.log(idArray);

<div>
  <button id="savebtn-1">Button #1</button>
</div>
<div>
  <button id="savebtn-2">Button #2</button>
</div>

answered Sep 28, 2022 at 5:55

Phil

166k25 gold badges265 silver badges269 bronze badges

1 Comment

C Dub Over a year ago

Thanks a bunch phil! I was so close to this solution earlier but somehow I was get nine single arrays like: ["savebtn-1"] ["savebtn-2"] and so on.

Htet Oo Wai Yan · Accepted Answer · 2022-09-28 05:57:19Z

1

You can create an empty array and push ids into that array.

const elements = document.querySelectorAll("button");

const idArray = [];

for (const element of elements) {
    let id = elements.getAttribute("id");
    idArray.push(id);
}

console.log('idArray ', idArray);

answered Sep 28, 2022 at 5:57

Htet Oo Wai Yan

1333 silver badges12 bronze badges

Collectives™ on Stack Overflow

Create an array from 'for of' loop outputs

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related