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
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Assigning events to form elements with a Javascript Class

    Hi All - I am relearning Javascript, and figured this time around I'd do it with a OOP and DOM approach. Here is the first problem I have encountered. I have a Javascript class that creates some form elements on a page. I am trying to assign events from a button to handlers within the class. Something like this:

    Code:
    	//parentBlock: a html element to draw the button into
    	function MyClass(parentBlock) {	
    		//establish class properties
    		this.parentBlock = parentBlock;
    		this.animal = 'Kangaroo';
    
    		//create a new button
    		var btnElement = document.createElement('input');
    		btnElement.setAttribute('type', 'button');
    		btnElement.setAttribute('value', 'Test');
    		var btn = this.parentBlock.appendChild(btnElement);
    
    		//assign click event to trigger method in the class
    		btn.onclick = this.testMethod;
    	}
    	
    	MyClass.prototype.testMethod = function() {
    		alert(this.animal);
    	}
    
    	window.onload = function() {
    		new MyClass(document.getElementById('myForm'));
    	}
    testMethod gets invoked fine when the button is pressed, but this points to the button, rather than the object instance. So when I do the alert in testMethod i am getting undefined rather than 'Kangaroo' as I would expect. Can anyone tell me what I am doing wrong? The problem would seem to be in the last line of the constructor. Is my OOP methodology way off - and I should be approaching this problem in a different manner? I have also tried eventListeners - but the result is the same.
    Last edited by mithsypoo; 03-28-2005 at 04:01 AM.

  • #2
    Regular Coder
    Join Date
    Feb 2005
    Posts
    400
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Insert self=this; into MyClass; use self.animal in testMethod.

  • #3
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Harry - I've tried a few variations on that; assigning this to a variable. But it isn't working for me. I'm sure I've overlooked something.
    Last edited by mithsypoo; 03-28-2005 at 07:12 AM.

  • #4
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Actually - assigning this to variable in the way you suggest (without var), makes the variable global - right? And in doing so, is useless to me. For example, say I create 5 instances of MyClass - then self is always going to point to the most recent object?
    Last edited by mithsypoo; 03-28-2005 at 07:11 AM.

  • #5
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeå, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Not if you use the var keyword. Then it'll be local.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards


  •  

    Posting Permissions

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