有没有办法简化document.getElementById?

Is there a way to simplify document.getElementById?

我的javascript代码超过300万行代码,因为我需要调用很多变量,有什么办法可以简化吗?

代码如下:

var Start = document.getElementById('Start'),
    question1 = document.getElementById('1'),
    question2 = document.getElementById('2'),
    question3 = document.getElementById('3'),
    question4 = document.getElementById('4'),
    question5 = document.getElementById('5'),
    question6 = document.getElementById('6'),
    question7 = document.getElementById('7');

我有 50 多个问题变量和 50 个答案变量。

像下面这样的事情呢:

// initialize a variable to be an empty array
var questions = [];

// create a loop which assigns value 1 to 9 into the variable i
for (let i = 1; i < 10; i++) {
    // assign the content of the element with ID i to i-th element of the array
    questions[i] = document.getElementById(i);
}

然后,您可以使用 questions[5] 代替 question5

如果您有 HTML 个元素的非顺序命名,您可以使用包含元素 ID 列表的数组:

// define a list of element IDs
let htmlIds = ['id1', 'ab', 'xy', 'anotherId'];

// initialize a variable to be an empty array
var questions = [];

// go through all items of the htmlIds arrays and populate questions
htmlIds.forEach(item => questions[item] = item);

但在这种情况下我会考虑一种不同的方法,您可以忽略 ID 并查询问题,例如使用 class 作为 PHP 大师在他的回答中提到的。

如前所述,您可以使用循环和数组:

let questions = [];
for (let i = 0; i < 8; ++i) {
  questions.push(document.getElementById(i));
}

您遍历某个合适的范围——并在每次迭代中附加到数组。

然后,您可以像这样访问特定的“问题”:

console.log(questions[4]);

class="question"添加到每个问题而不是id=1id=2等,然后使用document.querySelectorAll(".question")获取包含所有问题的类似对象的数组在页面上。

var questions = document.querySelectorAll(".question");
// now you can reference every question with questions[0] thru questions[n-1]