JavaScript创建变量并使用循环为其赋值

我创建了一个包含以下代码的脚本：

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");

每个位置包含不同的内容，我使用按钮在每个位置之间移动。这个脚本运行得很好，但是我想知道是否有更有效的方法来生成这些变量并将它们分配给这些值？我必须做很多这类的工作，在学习JavaScript的过程中，我读到了一些大意是“如果你发现自己不得不反复编写同一类型的代码，那么你可能做得不对。”

我提前知道我将拥有多少位置，我想我可以使用一个循环来完成这项工作，但我不确定。我希望得到的结果是一组变量[posOne、posTwo、posThree等]，对应的值为document.getElementById（“positionOne”）

---

谢谢。

也许不太依赖ID，但是使用常规类或选择器来查找您的位置，使用

document.getElementsByClassName（'position'） 
 一种方法，你可以考虑，你可以将感兴趣的元素分配给你的标记中的一个特定的类。然后，将该类的所有元素放入一个数组中，然后循环：

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

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

您可以从中创建两个漂亮的集合作为数组：

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

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

现在您不必使用单个变量。这取决于您将要实现什么，使用类似于其他答案中建议的类也可能是合适的。
您可以使用jQuery进行此类操作。基本上，jQuery是一个库，它使您能够轻松编写功能强大的Javascript

为了实现这一点，您应该为每个元素使用相同的类名，然后使用“each”函数对它们进行迭代

查看此短视频了解更多详细信息：
而不是将posOne手动编码为Poseven或任何需要迭代但将数字字符串更改为数字的内容：

 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);

var位置=1；
var totalPositions=11；
var backButton=document.getElementById（“backButton”）；
var nextButton=document.getElementById（“theNextButton”）；
var introPos=document.getElementById（“introductionText”）；
var totalPositions=11；
var pos=[]；
对于（i=1；i尝试了这一点，我得到了一个错误，指出“未捕获的语法错误：意外标记+这是我的代码：
介绍文本在这里出现
content1
content2text content“id=”position3“>content3
var position=1；var totalPositions=11；var backButton=document.getElementById（“backButton”）；var nextButton=document.getElementById（“introductionText”）；用于（i=1；i@user3822485我在检查也许我只是不理解，但这不就是创建了一个充满字符串的数组吗？我实际上没有任何变量，对吗？
 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"])