View Full Version : Custom Javascript Objects

06-04-2005, 10:32 PM
Hello, I'm having problems trying to make some custom objects, What I want to do is to call up some custom functions similar to the 'document' object and 'getElementById()' function structure:

document.getElementById("ID Attribute").property = ?
but I want:

myObject.<Number>.myFunction(myParameters) ;
<Number> is either an object or a function? This is most prefable:

myOject.Number( Integer ).myFunction(myParameters) ;
<Number> could be either 1 or 2 but I don't want to copy the code for myFunction twice.

myFunction must have access to this <Number>

How do I make this?

This is my attempt (I don't really understand custom objects) :

myObject = {
myNumber: function( SomeNumber )
myFunction( parameters ) : { do something with SomeNumber }
myFunction2( parameters ) : { do something with SomeNumber }
Here both myFunction and myFunction should have access to SomeNumber - thats what I want.

Hope you understand my [limited] explanation.

06-05-2005, 05:27 AM
You can use something like:

function customObject(HTMLObject) {
this.HTMLObject = HTMLObject;
this.customAttribute = 1;

customObject.prototype.customFunction = function(intParameter) {
alert( "["+this.HTMLObject.id+"]" + "["+intParameter+"]" + "["+this.customAttribute+"]" );

var obj1 = new customObject(document.getElementById("div1"));
var obj2 = new customObject(document.getElementById("div2"));

Then if I call the custom function:


The browser would pop up an alert box saying [obj1][9][1]

All this is on the basis that you have two divs on your page with id's div1 and div2 respectively

Hope this helps


06-05-2005, 09:29 PM
Thanks for the reply :D
I just need a little different : I can't make two individual objects:
var obj1 = new customObject(document.getElementById("div1"));
var obj2 = new customObject(document.getElementById("div2")); - the idea is that the number is fed dynamically to be used by the final functions

The reason why is that I have <div>iders numbered, I need to do certain things to each of them but the functions should be the same.

an example would be..


I'm not changing colours but I hope you understand what I mean.

changeFontColour() function has to be available to any number of Dividers, so whatever number I pass, the 'changeFontColour' must be able to access it.

In other words - the function changeFontColour (or whatever I call it) has to have access to the number somehow:

Say for example, a user chooses a divider by number:
var userChoice = parseInt( prompt("Choice?") ) ;
someObject.Divider(userChoice).adjustWhatever() ;

06-05-2005, 10:52 PM
Hey mate, this should be what you are looking for. Examples are given on the buttons.

<title>Custom div methods</title>
<script language="JavaScript">
//get the object by the number supplied
function divider( intDivider ) {
return window["objDivider"+intDivider];

// simple custom object
function Divider( objHTML ) {
this.objHTML = objHTML;

// custom object methods:
Divider.prototype.getBGColor = function() {
return this.objHTML.style.backgroundColor.toUpperCase();
Divider.prototype.setBGColor = function(strColor) {
this.objHTML.style.backgroundColor = strColor;

//the name of the divs
var strDivName = "divider";
// get all the divs with an id that contain strDivName and use them to create custom objects
function init() {
var divs = document.getElementsByTagName("div");
for( var i=0; i<divs.length; i++ ) {
if( divs[i].id.indexOf(strDivName) > -1 ) { //only get divs that contain
window["objDivider"+parseInt(divs[i].id.substring(strDivName.length, divs[i].id.length))] = new Divider(divs[i]);
/* This was my original way of grabbing the number in the div id but only grabbed every other div in moz for some reason!?!
Anyone know why?
if( divs[i].id.toLowerCase().indexOf(strDivName) > -1 && /([0-9])/gi.test(divs[i].id) ) {
window["objDivider"+RegExp.$1] = new Divider(divs[i]);

<body onload="init();">
<input type="button" name="btn1" value="get divider1 background color" onclick="alert( divider(1).getBGColor() );"><br><br>
<input type="button" name="btn" value="set divider2 bgcolor to yellow" onclick="divider(2).setBGColor('yellow');"><br><br>
<div id="divider1" style="width:100px; height: 100px; background-color: #9900CC">&nbsp;</div><br>
<div id="divider2" style="width:100px; height: 100px; background-color: #FF6666">&nbsp;</div><br>
<div id="divider3" style="width:100px; height: 100px; background-color: #330000">&nbsp;</div><br>
<div id="divider4" style="width:100px; height: 100px; background-color: #FF0000">&nbsp;</div><br>
<div id="divider10" style="width:100px; height: 100px; background-color: #33FF33">&nbsp;</div>

Tested in IE and Firefox

Hope this helps


06-10-2005, 05:58 PM
Thanks for replying, I don't think that is what I need/want...

I'm looking for a simple way to nest functions over two numbers without rewriting code.

When I say 'getElementById' - I meant the structure of it:

document.getElementById("String").Property = "String"
object.function(parameter).property = value

I need the similar structure/format of it, ideally - my custom object would look something like this (with different names) below :


myObject is just an object I'll place some methods in to do with my script
the chooseNumber method only receives a number
that then is used by the 'aFunction' method which will do something with the number

the 'aFunction' NEEDS THE NUMBER that was passed through chooseNumber, so it can take action with this number - I don't know how to go deeper...