Generating variables in a for loop javascript

Question

I have a massive long list of variables like so

container = document.getElementById('container_dc');
content = document.getElementById('content_dc');
unexpClickthrough = document.getElementById('unexpClickthrough');
expandedBgExit = document.getElementById('expanded_background_exit_dc');
vidContainer = document.getElementById('video_container_dc');
vid = document.getElementById('video_dc');
vidPlayBtn = document.getElementById('video_control_play_dc');
vidPauseBtn = document.getElementById('video_control_pause_dc');
vidStopBtn = document.getElementById('video_control_stop_dc');
vidReplayBtn = document.getElementById('video_control_replay_dc');
vidUnmuteBtn = document.getElementById('video_control_unmute_dc');
vidMuteBtn = document.getElementById('video_control_mute_dc');
close_btn = document.getElementById('close_btn_dc');
expand_content =  document.getElementById('expand_content_dc');
mainImage = document.getElementById('mainImage');
vertBar_1 = document.getElementById('vertBar_1');
vertBar_2 = document.getElementById('vertBar_2');
vertBar_3 = document.getElementById('vertBar_3');
vertBar_4 = document.getElementById('vertBar_4');
vertBar_5 = document.getElementById('vertBar_5');
vertBar_6 = document.getElementById('vertBar_6');
headline = document.getElementById('headline');
darkener = document.getElementById('darkener');
gradBar = document.getElementById('gradBar');
txt_forToday = document.getElementById('txt_forToday');
stat1 = document.getElementById('stat1');
stat2 = document.getElementById('stat2');
stat3 = document.getElementById('stat3');
stat4 = document.getElementById('stat4');
divider1 = document.getElementById('divider1');
divider2 = document.getElementById('divider2');
divider3 = document.getElementById('divider3');
cta = document.getElementById('cta');
downArrow = document.getElementById('downArrow');
vidPanelBg = document.getElementById('vidPanelBg');
vidPanelCopy = document.getElementById('vidPanelCopy');
legalBut = document.getElementById('legalBut');
legalButExp = document.getElementById('legalButExp');
legalsPanel = document.getElementById('legalsPanel');
legalsPanelExp = document.getElementById('legalsPanelExp');

I would like to shorten this by using a for loop. Is there any way to replicate this in a for loop without creating an object for them to site in? The problem is I need these variable names to stay the same.

F*** Hell Sh*t ! Why do you need All this ? You seriously have to reconsider your app. What the goal of this? — ssbb
– ssbb, Commented Jul 17, 2015 at 14:35
Why not give all those elements a class that will enable you to target them all in one line? — Drew Kennedy
– Drew Kennedy, Commented Jul 17, 2015 at 14:37
Thanks for all your comments. The reason I have this many elements being targeted it because it is a banner with a lot of heavy animation. It is recommended that you asign all the variables before you begin. I am using TweenLite, I don't think there is a way to target elements within tweenLite, without doing this? — Wiplash
– Wiplash, Commented Jul 20, 2015 at 8:36

salezica · Accepted Answer · 2015-07-17 14:38:09Z

The only redundancy there is the repeated call to document.getElementById(). The ids of those elements are information: you can't do away with those. Do something like this:

elementIds = ['container_dc', 'content_dc', ...];

for (var i = 0; i < elementIds.length; i++) {
    var id = elementIds[i];
    window[id] = document.findElementById(id); # same as global var
}

console.log(content_dc) // access them like this

On a side note, it strikes me as odd that you need to obtain so many elements from the document. This is not common: perhaps you should think about a design that doesn't need Javascript manipulating so many of the elements of the page.

You pick up a lot of your containers, for example, which is rare: generally, those are for layout purposes and you mention them in CSS, but only interact with the elements holding dynamic information in your scripts.

j08691 · Accepted Answer · 2015-07-17 14:37:55Z

0

You could create an array of the variable names, then loop through them using the window object to build the assignments:

var ary = ['vertBar_1', 'vertBar_2', 'vertBar_3'];
for (var i = 0; i < ary.length; i++) {
    window[ary[i]] = document.getElementById(ary[i]);
}
console.log(vertBar_1, vertBar_2, vertBar_3)

answered Jul 17, 2015 at 14:37

j08691

208k33 gold badges269 silver badges281 bronze badges

1 Comment

Wiplash Over a year ago

Thanks, looks perfect!

Collectives™ on Stack Overflow

Generating variables in a for loop javascript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related