I'm currently working on setting up a system where I can create multiple instances of colorBox. Right now, I have one instance named box and everything is functioning as expected. However, I want to be able to modify the styles of my new colorBoxes after they've been created using something like box.resetColor('blue');. To test this functionality, I've created a simple function called voodoo that just alerts you. Unfortunately, I'm unable to call box.voodoo() because colorBox is a function rather than an object.
What would be the most effective approach to managing multiple instances of colorBox, allowing them to be updated individually whenever needed without having to update all properties of the original box? Only the specific properties should be modified.
Javascript:
var colorBox = function(node, options) {
this.setSize = function(){
node.style.width = options.width + 'px';
node.style.height = options.height + 'px';
};
this.setColor = function(){
node.style.backgroundColor = options.color;
};
this.setSize();
this.setColor();
voodoo(){
alert('voodoo');
}
}
var node = document.getElementById('thing1');
var options = {
color: 'red',
width: 200,
height: 200
}
var box = new colorBox(node, options);
box.voodoo();