Javascript object & method calls

[richierichie]

Hi,

I am creating a JavaScript object which I want to use to respond to user input on a web page. The object will basically be made up of a constructor and then a selection of functions which will use the DOM to alter the appearance of the page according to the user's input. I am getting stuck because I want a form element that is being created by the object to have an 'onkeyup' event attached to it which will call another function from the same object.

Now, I understand how to attach the 'onkeyup' event to the input element I have created using the DOM. If I tell the event to call a normal function then it does exactly that. What I am having trouble with is getting the event to call another function within the object that created the input box in the first place. (or even if this is possible / a wise thing to do!).

So, the code... (I've chopped great chunks out to keep it simple - shouldn't think it will work as-is)

// this is my object
function anObject(param)
{
 this.param = param;
 this.aMeth = aMethod;
 this.bMeth = bMethod;
}

// this is a function called when the object is first created which will draw the input element
function aMethod()
{
 var inputCoName = document.createElement('input');
 inputCoName.setAttribute('type','text');
 inputCoName.setAttribute('name','coname');
 
 // this adds the onkeyup event
 inputCoName.onkeyup = function ()
 {
  bMethod(this.value);
 }

 // append it to it's parent etc etc
}

// the method I want to call from the 'onkeyup' event but that doesen't work
function bMethod(value)
{
 alert(value);
}

And finally this is how the object is created:

<a href="#" onclick="var c = new anObject('test'); c.aMeth();">click</a>

Hopefully you can see that when the link is clicked it creates a new anObject object called c and then immediately calls the aMethod() function. This creates an input element with an 'onkeyup' event attached to it so that when the user enters text in it should call the bMethod() function. But it doesen't. Ever. I've messed around with it a bit and tried bits and pieces like calling c.bMethod() or this.bMethod() but they obviously don't work.

I'm far from being a javascript guru and javascript OOP is a strange place compared with my normal Java world, so I'd appreciate any advice I can get on this.

Thanks

Richard

 

[BillyRayPreachersSon]

I find that the easiest way to deal with this sort of thing is to make each instance of the object aware of how to access itself.

This normally means defining a variable pointing to the object, and having the object know its own name... for example, the constructor function might take 2 paramaters:

function anObject(myName, param) {
   this.ownName = myName;
   ...
}

and then it would be instantiated like this:

var someObj = new anObject('someObj', 'test');

[!]as long as someObj has global scope.[/!]

Then inside your object, you can do this:

inputCoName.onkeyup = function () {
    window[this.ownName].bMethod();
}

to call the bMethod within the context of the object.

You might also consider changing this:

function anObject(param) {
   this.param = param;
   this.aMeth = aMethod;
   this.bMeth = bMethod;
}

to this:

function anObject(param) {
   this.param = param;
}
anObject.prototype.aMeth = aMethod;
anObject.prototype.bMeth = bMethod;

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[richierichie]

Hi Dan,

Thanks a lot for the advice! I'm still relatively clueless about the more advanced aspects of JS programming (never even see 'prototype' before!), so I doubt I would have got there myself!

Much obliged

Richard