how to access element whose id is variable

Question

I need to access elements in html file using javascript, their names are like arr_1, arr_2, arr_3, i wish to use a loop to dynamically create the id then to access them like below:

for(var i=0; i< 10; i++) {
  var id = "arr_" + i;

  $document.getElementById('id')....

}

but it doesn't work. i remember there is an function to allow me do that, anyone know what that is?

Answer 1

change

$document.getElementById('id')

to

$document.getElementById(id)

Answer 2

for (var i = 0; i < 10; i++) {
  var obj = document.getElementById("arr_" + i);
  obj.style.border = "1px solid red";
}

Answer 3

You don't need the dollar sign preceding document, and you should pass your id variable to the getElementById function, not a string containing 'id':

for(var i=0; i< 10; i++) {
  var id = "arr_" + i;
  var element = document.getElementById(id);
  // work with element
}

You might also want to check if getElementById actually found your element before manipulating it, to avoid run-time errors:

if (element) {
  element.style.color = '#ff0000';
}