Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Sep 2002
    Posts
    157
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Custom Javascript Objects

    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:

    Code:
    document.getElementById("ID Attribute").property = ?
    but I want:
    Code:
    myObject.<Number>.myFunction(myParameters) ;
    <Number> is either an object or a function? This is most prefable:
    Code:
     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) :
    Code:
    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.
    Last edited by vkidv; 06-04-2005 at 10:39 PM.
    Regards
    VKiDV

  • #2
    Regular Coder martin_narg's Avatar
    Join Date
    Jul 2002
    Location
    Chamonix, France
    Posts
    600
    Thanks
    1
    Thanked 3 Times in 3 Posts
    You can use something like:

    Code:
    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:
    Code:
    obj1.customFunction(9);
    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

    m_n
    Last edited by martin_narg; 06-05-2005 at 05:34 AM.
    "Cos it's strange isn't it. You stand in the middle of a library and go 'Aaaaaaaaaaaaaaaaggggggghhhhhhh!'
    and everybody just stares at you. But you do the same in an aeroplane, and everybody joins in."
    -Tommy Cooper

  • #3
    Regular Coder
    Join Date
    Sep 2002
    Posts
    157
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the reply
    I just need a little different : I can't make two individual objects:
    Code:
    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..

    someObject.Divider(1).changeFontColour("red")

    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:
    Code:
    someObject.Divider(1).changeFontColour("red")
    Say for example, a user chooses a divider by number:
    Code:
     var userChoice = parseInt( prompt("Choice?") ) ;
    someObject.Divider(userChoice).adjustWhatever() ;
    Last edited by vkidv; 06-05-2005 at 09:31 PM.
    Regards
    VKiDV

  • #4
    Regular Coder martin_narg's Avatar
    Join Date
    Jul 2002
    Location
    Chamonix, France
    Posts
    600
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Hey mate, this should be what you are looking for. Examples are given on the buttons.

    Code:
    <html>
    <head>
    <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]);
    		}
    		*/
    	}
    }
    
    </script>
    </head>
    <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>
    </html>
    Tested in IE and Firefox

    Hope this helps

    m_n
    "Cos it's strange isn't it. You stand in the middle of a library and go 'Aaaaaaaaaaaaaaaaggggggghhhhhhh!'
    and everybody just stares at you. But you do the same in an aeroplane, and everybody joins in."
    -Tommy Cooper

  • #5
    Regular Coder
    Join Date
    Sep 2002
    Posts
    157
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.chooseNumber(NUMBER).aFunction()

    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...
    Last edited by vkidv; 06-11-2005 at 11:27 AM.
    Regards
    VKiDV


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •