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.

• ssbb: F*** Hell Sh*t ! Why do you need All this ? You seriously have to reconsider your app. What the goal of this?
• Drew Kennedy: Why not give all those elements a class that will enable you to target them all in one line?
• Wiplash: 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?

Answer 1

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.

Answer 2

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)

• Wiplash: Thanks, looks perfect!