Raphael.js - How to programmatically generate element name? - raphael

Question

I have a number of Raphael rectangle elements hard-coded into the page via php, which generates them on the fly depending on how many are needed when the page is called.
What I'm trying to do is write a javascript function that will take an id number and alter the relevant Raphael function's background color.
I know the below example won't work, but this is what I'm trying to achieve.
var rectangle_1 = paper.rect(100, 10, 200, 75);
var rectangle_2 = paper.rect(400, 10, 200, 75);
var rectangle_3 = paper.rect(700, 10, 200, 75);
change_color('1');
function change_color(id) {
variable_name = 'rectangle_' + id;
variable_name.attr({fill: 'blue', stroke: 'black', 'stroke-width': 3});
}
Clearly this doesn't work and any help and advice on how to generate an element name on the fly would be greatly appreciated,
regards,
Ste

Answer 1

Just use an array or an object to store the rects instead of named variables.
var rectangles = [];
rectangles[0] = paper.rect(100, 10, 200, 75);
rectangles[1] = paper.rect(400, 10, 200, 75);
rectangles[2] = paper.rect(700, 10, 200, 75);
change_color(1);
function change_color(id) {
rectangles[id].attr({fill: 'blue', stroke: 'black', 'stroke-width': 3});
}
If you need string IDs, you can do it as an object:
var rectangles = {};
rectangles['one'] = ...