How to pass a variable as a parameter to "getElementById"

Question

I need to color several canvas, the code below colors one of them

var canvas1 = document.getElementById("a1");
var ctx1 = canvas1.getContext('2d');
ctx1.fillStyle = cor; //aqui vai a cor html
ctx1.fillRect(0, 0, 300, 300);

I can automate color through an array type arrcor = [#F95201,#AB31AA,#E70078...], something like:

ctx1.fillStyle = arrcor[i];

But I need each color of this to go to a different canvas according to the ID, something like id="a1", id="a2", id="A3"... So I need to automate this change, I tried to pass a variable in, like,:

rolln = "a" + i;
var canvas1 = document.getElementById(rolln);
var ctx1 = canvas1.getContext('2d');
ctx1.fillStyle = cor; //aqui vai a cor html
ctx1.fillRect(0, 0, 300, 300); 

ou

var canvas1 = document.getElementById("a" + i);
var ctx1 = canvas1.getContext('2d');
ctx1.fillStyle = cor; //aqui vai a cor html
ctx1.fillRect(0, 0, 300, 300); 

But it doesn’t work, as I do to change the id, according to i (counter) inside the loop since getElementById accepts only a string as parameter?

Answer 1

You can place the association within an array of objects, for example:

var arrayCores = [
     {"nome_elemento": "a1", "cor": "#FFFFFF"}, 
     {"nome_elemento": "a2", "cor": "#AB31AA"}
];

for (var i in arrayCores){
   var canvas1 = document.getElementById(arrayCores[i]["nome_elemento"]);
   var ctx1 = canvas1.getContext('2d');
   ctx1.fillStyle = arrayCores[i]["cor"];
   ctx1.fillRect(0, 0, 300, 300); 
}