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 4 of 4
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Assigning Onclick Object Function to Field from Within Object

    I've been playing with this one since yesterday. I have an object that I'm instantiating, and, within the initialization of the object, I'm assigning one of the object's functions an onclick event to a field on the page.

    I've tried everything I can think of. Using "this." doesn't work, sending the object name through with a variety of different methods of calling it don't work. I'm guessing there's a pretty straightforward and easy solution to this that I'm just not considering.

    I've commented out all the different strategies in the code below. Thanks to everyone in advance for the help.

    Code:
    <html>
    <body>
    
    <form name="test">
    <input type="button" id="testButton" value="TEST">
    </form>
    
    <script language="javascript">
    
    function DoSomething()
    {
        this.fieldToAssignOnchange = '';
    }
    
    DoSomething.prototype =
    {
        initialize : function(field,objectName)
        {
            this.fieldToAssignOnchange = document.getElementById(field);
            this.functionCallToString = objectName + ".successMessage();";
            this.fieldToAssignOnchange.onclick = function()
            {
                //THIS FAILS
                //objectName.successMessage();
                
                //THIS FAILS
                //this.successMessage();
                
                //THIS WORKS - BUT I CAN'T HARDCODE THE VALUE
                //alertButton.successMessage();
                
                //THIS DOES NOTHING
                //this.functionCallToString;
                
                //THIS DOES NOTHING
                //eval(this.functionCallToString);
            };
        },
        successMessage : function()
        {
            alert("Success!");
        }
    }
    
    var alertButton = new DoSomething;
    alertButton.initialize("testButton","alertButton");
    
    </script>
    
    </body>
    </html>

  • #2
    New Coder
    Join Date
    Feb 2009
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Typo Correction

    That should read, "I'm assigning one of the object's functions as an onclick event to a field on the page."

    Apologies for any confusion.

  • #3
    Senior Coder shyam's Avatar
    Join Date
    Jul 2005
    Posts
    1,563
    Thanks
    2
    Thanked 163 Times in 160 Posts
    use a closure

    Code:
    DoSomething.prototype = {
        initialize : function(field,objectName) {
            this.fieldToAssignOnchange = document.getElementById(field);
            var thisObj = this;
            this.fieldToAssignOnchange.onclick = function() {
                thisObj.successMessage();
            };
        },
        successMessage : function() {
            alert("Success!");
        }
    }
    You never have to change anything you got up in the middle of the night to write. -- Saul Bellow

  • Users who have thanked shyam for this post:

    rsomma (03-04-2009)

  • #4
    New Coder
    Join Date
    Feb 2009
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thank you!

    Thanks so much! I'm new to closures, and didn't fully understand the articles I was coming across on them. You have been a big help!


  •  

    Posting Permissions

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