Loop through Array and assign variables name and id

Question

I want to loop through an array and give their name. I tried to use template literals, but it doesn't work.

 const colors = ['yellow', 'green', 'brown', 'blue', 'pink','black']
    for (let color of colors){
        const `${color}Button` = document.querySelector(`#${color}`); 
    }

the results I want should be something like this

yellowButton = document.querySelector(#yellow); 

greenButton = document.querySelector(#green);

.

.

.

.

blackButton = document.querySelector(#black);

Could you guys please revise my code?

Related, see Template String As Object Property Name.

showdev
– showdev

2021-09-05 17:35:56 +00:00
Commented Sep 5, 2021 at 17:35 — showdev
– showdev, Commented Sep 5, 2021 at 17:35

Peter Seliger · Accepted Answer · 2021-09-05 23:09:42Z

2

You can attach variables onto the window object, making it accessible as a global variable. However this is a bad practice, since it pollutes namespace, causing unnecessary bugs and much headache in the future. A much better approach to this is to use native javascript objects, as this is the exact use case it was made for.

With your example:

const colors = ['yellow', 'green', 'brown', 'blue', 'pink', 'black']

const buttons = colors.reduce((accum, color) => {
  accum[`${color}Button`] = document.querySelector(`#${color}`);
  return accum;
}, {});

console.log(buttons)

// to access certain element:
const elem = buttons.yellowButton
console.log(elem)

<button id='yellow'></button>
<button id='green'></button>
<button id='brown'></button>
<button id='blue'></button>
<button id='pink'></button>
<button id='black'></button>

edited Sep 5, 2021 at 23:09

Peter Seliger

13.5k3 gold badges31 silver badges45 bronze badges

answered Sep 5, 2021 at 21:49

Kenneth Lew

2373 silver badges7 bronze badges

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

2 Comments

Peter Seliger Over a year ago

Such an approach also deserves much more the usage of reduce instead of forEach.

Kenneth Lew Over a year ago

Looking at it now, I agree with you. I will change my answer.

The Otterlord · Accepted Answer · 2021-09-06 09:53:34Z

0

In the browser, you can attach variables to the window interface and reference them as if they were defined in the global scope.

for (const color of colors) {
  window[`${color}Button`] = document.querySelector(`#${color}`)
}

console.log(redButton.textContent)

However, as others have mentioned, it may not be the best approach.

edited Sep 6, 2021 at 9:53

answered Sep 5, 2021 at 17:05

The Otterlord

2,23514 silver badges23 bronze badges

Collectives™ on Stack Overflow

Loop through Array and assign variables name and id

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related