JavaScript creating variables and assigning them a value using a loop

Question

I have created a script that contains the following code:

var position = 1;
var backButton = document.getElementById("theBackButton");
var nextButton = document.getElementById("theNextButton");
var introPos = document.getElementById("introductionText");
var posOne = document.getElementById("positionOne");
var posTwo = document.getElementById("positionTwo");
var posThree = document.getElementById("positionThree");
var posFour = document.getElementById("positionFour");
var posFive = document.getElementById("positionFive");
var posSix = document.getElementById("positionSix");
var posSeven = document.getElementById("positionSeven");
var posEight = document.getElementById("positionEight");
var posNine = document.getElementById("positionNine");
var posTen = document.getElementById("positionTen");
var posEleven = document.getElementById("positionEleven");

Each position contains different content and I use buttons to move between each position. The script works just fine, but I am wondering if there is a more efficient way to generate these variables and assign them to these values? I have to do this type of work a lot, and in my attempt at learning JavaScript I read something to the effect of "If you find yourself having to write the same type of code over and over again, you're probably not doing it right."

I know ahead of time how many positions that I will have and I'm thinking that I could use a loop to do this, but I'm not sure. The results I hope to get is a bunch of variables [posOne, posTwo, posThree, etc] with the corresponding value of document.getElementById("positionOne");

Thanks.

digitai · Accepted Answer · 2016-01-21 20:53:33Z

2

Instead of handcoding posOne to posEleven or whatever you need iterate but changing number strings to digits:

 var position = 1;
 var totalPositions=11;
 var backButton = document.getElementById("theBackButton");
 var nextButton = document.getElementById("theNextButton");
 var introPos = document.getElementById("introductionText");

 var totalPositions=11;
 var pos=[];

 for (i=1; i<=totalPositions; i++) {
        pos[i] = 'pos'+i+'= document.getElementById("position'+i+'")';
 }

 console.log(pos);

Need to change your DOM elements id, say div ids or whatever you are going to manipulate.

Keep aqn eye on the console.log, maybe eliminate after you don't need anymore.

edited Jan 21, 2016 at 20:53

answered Jan 21, 2016 at 19:55

digitai

1,8603 gold badges22 silver badges38 bronze badges

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

6 Comments

user3822485 Over a year ago

I tried this, and I get an error stating "Uncaught SyntaxError: Unexpected token +

user3822485 Over a year ago

Here is my code: <p class="textContent" id="introductionText">Introduction Text Goes Here</p> <p class="textContent" id="position1">content1</p> <p class="textContent" id="position2">content2</p> <p class="textContent" id="position3">content3</p>

user3822485 Over a year ago

digitai Over a year ago

@user3822485 I'm checking

user3822485 Over a year ago

Perhaps I am just not understanding, but doesn't this just create an array full of strings? I don't actually have any variables, right?

|

kpucha · Accepted Answer · 2016-01-21 20:04:44Z

1

 var positions = new Object();
 var arrIds = ["positionOne","positionTwo","positionThree","positionFour","positionN"]

 for (var position in arrIds){     
     var id = arrIds[position];
     positions[id] = document.getElementById(id);
 }

 console.log(positions["positionOne"])

answered Jan 21, 2016 at 20:04

kpucha

7295 silver badges12 bronze badges

Comments

Joseph Young · Accepted Answer · 2016-01-21 19:49:10Z

0

Perhaps don't rely so much on IDs, but use general classes or selectors to find your positions, using document.getElementsByClassName('position');.

answered Jan 21, 2016 at 19:49

Joseph Young

2,79414 silver badges23 bronze badges

Comments

mmccaff · Accepted Answer · 2016-01-21 19:51:25Z

0

One approach you might consider, is that you could assign the elements of interest a specific class in your markup. Then, get all elements of that class to an array that you could then loop through:

var elements = document.getElementsByClassName("yourClassName");

elements.forEach(function(element) {
  // do things to element
});

answered Jan 21, 2016 at 19:51

mmccaff

1,2811 gold badge11 silver badges20 bronze badges

Comments

Blackbam · Accepted Answer · 2016-01-21 19:52:07Z

0

You could make two pretty collections from it as arrays:

var buttons = ["theBackButton","theNextButton","introductionText", ... ];
var positions = [];

for(var button in buttons) {
    positions.push(document.getElementById(buttons[button]));
}

Now you do not have to use single variables. It depends on what you are going to achieve using a class like in other answers suggested may also be suitable.

answered Jan 21, 2016 at 19:52

Blackbam

19.7k31 gold badges112 silver badges167 bronze badges

Comments

Ricardo Campos · Accepted Answer · 2016-01-21 19:52:30Z

0

You can use jQuery for this kind of things. Basically jQuery is a library that enables you to write very powerfull Javascript easily.

To make this work, you should use the same class name for every element and then use the "each" function to iterate through them.

Check this short video for more details: https://www.youtube.com/watch?v=67IP2QoNIDc

answered Jan 21, 2016 at 19:52

Ricardo Campos

2542 silver badges7 bronze badges

Collectives™ on Stack Overflow

JavaScript creating variables and assigning them a value using a loop

6 Answers 6

6 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

6 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related