Menu
I am having problems using an event handler as a method within an object rather than a function outside an object. How do I do it?
Here’s what I want to do:
1. Construct an object with one property and two methods:
(a) The property (.msgNode) stores a DOM node which should be a DIV element containing a message
(b) Method 1 creates a (separate) DIV node, and puts two SPAN nodes within it. Only one SPAN element is displayed (not merely visible). A ‘click’ event is sent on each SPAN element to call method 2. When the displayed SPAN element is clicked, the other SPAN element is set to display while the clicked SPAN element is set NOT to display. One SPAN element contains text ‘Show Message’ and the other SPAN element contains text ‘Hide Message’.
(c) Method 2 is supposed to be the event handler: it takes a boolean argument ‘true’ when the ‘Show Message’ SPAN element is clicked, and it sets display to ‘block’ for the DIV containing the message. It also does the toggling of the display of the two SPAN nodes containing the alternating prompts.
When method 1 is called, it builds the DIV and two SPAN nodes, then looks for an HTML comment node containing text data “insertActiveDivHere”, thus it looks for
[CODE]<!– insertActiveDivHere” –>[/CODE]
in the HTML body and it inserts the DIV node containing two SPANs before that node. The HTML comment and thus built DOM nodes should be within the body.
2. When the HTML page containing the script is intially loaded, the DIV containing the message is not displayed. After loading, onload is invoked to construct the object and then call method 1.
You can look at the code in a working HTML document here:
[URL=”http://mavigozler.awardspace.info/test/htmlTOCgeneratorTest.html”]http://mavigozler.awardspace.info/test/htmlTOCgeneratorTest.html
When the ‘click here to show message’ SPAN node is clicked, nothing happens. A Javascript debugger stops on line 19, saying that ‘this.showMessage()’ event handler is undefined.
I am aware that the ‘this’ object is clearly not the constructed object when called from “onclick”.
So how does one put (a reference to) the constructed object inside the handler code so I can call the DOM nodes that the constructed object “owns”?