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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Attaching Custom Methods to JavaScript Elements

    The JavaScript Array Object has the built-in reverse() method, which can be implemented like so:
    Code:
    ARRAY_NAME.reverse()
    Simple enough, right? Well, I'm bewildered as to how to do this with my own methods. For example, let's assume I've got a function called changeColor, and I wanted to attach it to an element like so:
    Code:
    document.getElementById('someElement').changeColor('red');
    How would I go about doing that?

  • #2
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    I think what you're talking about are event handlers.. I'm not exactly a JS whiz, but hopefully this link will help, if not, my bad!

    http://developer.mozilla.org/en/docs...dEventListener

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #3
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, way off. I'm almost certain it can be done (attaching functions, that is) using JavaScript Objects, I just can't seem to piece it together. It could just as easily be done with this function:
    Code:
    function changeColor(element, color)
     {
    element.style.color = color;
     }
    but I'm a stickler for knowing how to do things, and I've always pondered the possibility of attaching functions. There are several native functions that act via attachment (the ARRAY.reverse() that I mentioned previously is a perfect example), so it must be possible.

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    ... or do you mean assigning your own methods? Perhaps this example will help you.
    Code:
    <html>
    <head>
    <title>test</title>
    <script type="text/javascript">
    function setColor(myColor) {
      this.style.color = myColor;
    }
    </script>
    </head>
    <body>
    <span id="monkey">hello</span>
    <input type="button" value="go" onclick="document.getElementById('monkey').changeColor('red')" />
    
    <script type="text/javascript">
    document.getElementById('monkey').changeColor = setColor;
    </script>
    
    </body>
    </html>

  • #5
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So very close. In order for that approach to work, however, I'd have to do
    Code:
    document.getElementById('ELEMENT_IN_QUESTION').changeColor = setColor;
    for every single element I'd like it to work with, though. Not exactly efficient. Is this the only way to do it, though?

  • #6
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Quote Originally Posted by SyQo View Post
    So very close. In order for that approach to work, however, I'd have to do
    Code:
    document.getElementById('ELEMENT_IN_QUESTION').changeColor = setColor;
    for every single element I'd like it to work with, though. Not exactly efficient. Is this the only way to do it, though?
    Code:
    HTMLElement.prototype.changeColor = setColor;
    In Firefox and Opera, at least.

  • #7
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Works to perfection. Much thanks to both of you.


  •  

    Posting Permissions

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