Jump to content
Larry Ullman's Book Forums

Js Event Handling

Recommended Posts

I have created a very basic HTML page to illustrate a problem I am having. Feel free to copy it into a text editor and create your own HTML page to understand my problem below.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">


   <title>Event Test</title>

   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

   <script type="text/javascript">

     window.onload = function() {

       document.getElementById('button1').onclick = toggleMe;

       // button2 event goes here.


     function toggleMe() {

       (this.style.background == 'red') ? this.style.background = 'white' : this.style.background = 'red';



   <style type="text/css">

     #button1, #button2 {

       border: 1px solid red;

       height: 100px;

       margin: 10px;

       width: 100px;





   <div id="button1"></div>

   <div id="button2"></div>




Basically, I want to assign an onclick event to button2 that will cause button1 to be toggled. Basically, regardless of whether you click on button1 or button2, only button1 will toggle. Is this possible?


I was originally thinking that the following would work:


document.getElementById('button2').onclick = document.getElementById('button1').onclick;


But that's essentially the same as saying the following:


document.getElementById('button2').onclick = toggleMe;


As such, it doesn't work. Is there any solution to my problem? Thank you.

Link to comment
Share on other sites

Well, my code is purely demonstrating a concept. It's not actually useful as is.


Basically, I have a bunch of DIVs being generated on the page load. By clicking on any one of the DIVs, details regarding that DIV are displayed. However, along with the DIV info being loaded, left and right arrows are also loaded, which when clicked, need to go to the previousSibling/nextSibling DIV.


As such, I wanted to be able to do something like (and this is pseudo code):


for (x iterations)

 create DIV node

 add to DOM

 DIV.onclick = someFunction;


(And once DIV information is displayed with the arrows)

leftArrow.onclick = previousSibling.someFunction;

rightArrow.onclick = nextSibling.someFunction;


I hope that pseudo code makes sense. Also, I can already get it to easily work by passing a parameter to the someFunction function, but I was wondering if it was possible without having to pass a parameter and just using this in someFunction.


Anyway, I have gotten it to work as follows (just the code for the left arrow):


document.getElementById('leftArrow').onclick = function() { someFunction(document.getElementById('the-current-DIV-node-whose-info-is-displayed').previousSibling); };


Well, I hope that's semi-clear. Anymore than that, and I'd have to start burying you in unnecessary amounts of code, which aren't relevant to the issue at hand.

Link to comment
Share on other sites

After thinking about my problem for some time, I have more or less come to the conclusion that it is pretty much impossible to do what I want unless I, A) pass an object as an argument, or B) create a pseudoclass in JS and attach the function as a method of the class. Anyway, simply passing an argument solved my problem, so I'll leave it at that.

Link to comment
Share on other sites

Sorry for not getting back to this sooner. Couldn't you just create a master array in JavaScript that lists the hierarchy of DIVs so that knowing the current DIV would be an easy way to know what the next and previous DIVs were?

Link to comment
Share on other sites

Well, I could do that, but again, I was going for an "elegant" solution. Actually, it doesn't really matter though, the more I think about it.


Besides, I ended up putting everything in a self-invoking function to avoid any footprints in the global namespace.


Anyway, thanks for the suggestion, and no worries on the late response.

Link to comment
Share on other sites


  • Create New...