Win a copy of Programmer's Guide to Java SE 8 Oracle Certified Associate (OCA) this week in the OCAJP forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

question about objects and events in javascript

 
Karen Nelson
Ranch Hand
Posts: 57
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi,
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
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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


Eric
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 65105
89
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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).
 
Karen Nelson
Ranch Hand
Posts: 57
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 57
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thank you for the information about closures -- one of those things I'd heard about but never understood. It makes more sense now.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic