File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
The moose likes HTML, CSS and JavaScript and the fly likes question about objects and events in javascript Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "question about objects and events in javascript" Watch "question about objects and events in javascript" New topic

question about objects and events in javascript

Karen Nelson
Ranch Hand

Joined: Aug 19, 2005
Posts: 57
This question is rather involved, so here goes ...
I am using objects in javascript to create and display input textboxes. Along with the textbox is a button that allows the user to check whether his/her input was correct. Essentially this is automating the code normally associated putting an input box and send button on the screen, so the only code needed is

The problem comes when I want to use the onClick event to check the input. Since the Label object has a "check" function, I would like to write onKlick="this.check();" However, once the label is written into the body of the document, the keyword 'this' is not recognized. Instead I need the name of the object. So far the only way I have figured out to do this is to make the object's name into a field (i.e., var lbl = new Label(3, idLabel, 'lbl') which is ugly and dangerous.

Is there a way to get the name of the object (not the class), or another better way to approach the problem? Thanks! Karen.

(onClick misspelled below to get around javaranch security)
Eric Pascarello

Joined: Nov 08, 2001
Posts: 15385
You should not be using document.write in there. You should be looking into document.createElement()

In your case this.check() is refereing to the form element and not the this object. You need to assign the event handler like this

Bear Bibeault
Author and ninkuma

Joined: Jan 10, 2002
Posts: 63852

The technique Eric shows here is called a closure. It can be a bit confusing, but it's a very useful technique for binding data to a function.

When an anonymous function is defined as shown, it "inherets" access to the environment in which it is defined -- in this case, the ref variable. (Note: closures do not have access to the this pointer of their enviroment which is why it is copied to ref before defining the closure).

[Asking smart questions] [About Bear] [Books by Bear]
Karen Nelson
Ranch Hand

Joined: Aug 19, 2005
Posts: 57
Thank you so much! This is exactly what I needed to know. Can I ask one more question? Are there potential pitfalls of mixing appendChild, innerHTML, and/or document.write in the same function? Currently my write function is

Thank you again, Karen.
Karen Nelson
Ranch Hand

Joined: Aug 19, 2005
Posts: 57
Thank you for the information about closures -- one of those things I'd heard about but never understood. It makes more sense now.
I agree. Here's the link:
subject: question about objects and events in javascript
jQuery in Action, 3rd edition