Adding an onclick event to a div from within javascript

[pwee167]

Hi,

I have 2 questions: First is a coding issue and the second is a design question.

I am trying to add an onclick event to a div from within javascript. Basically i have 2 divs containing arrows ("<<" and ">>"), used to toggle the week of a calendar. At the moment the ajax communication and handling of the response is working fine. After i processed this, i want to switch the arrows, basically add onclick to the previously non-active arrow and then nullify the previously active arrow. How do i go about doing this? Below is my attempt at solving it, with no luck.

function switch_direction(direction)
{
  var leftobj = document.getElementById("left");
  var rightobj = document.getElementById("right");

  if(direction == "right")
  {
    rightobj.className = "toggle_off";
    leftobj.className = "toggle_on";
    rightobj.onclick = null;
    leftobj.onclick = "init()";
  }
  else
  {
    rightobj.className = "toggle_on";
    leftobj.className = "toggle_off";
    rightobj.onclick = "init()";
    leftobj.onclick = null;
  }
}

Design question:

At the moment i have a sort of a controller function (using a switch), init(), which is called by all events. I detect the event and find the id of the element the event was triggered on. I am not too sure if this a good idea, as i have a calendar with a div for every 30mins in a day (and 7 days of the week). Thats 336 divs, which at the moment i intend to add the onclick="init()" function to.
I am pretty new to javascript (about 2 days), so any assistance or contructive criticism is appreciated.

function init()
{
  var evt = window.event || arguments.callee.caller.arguments[0];
  if(evt != null)
  {
    var target = evt.target || evt.srcElement;

    var element_id = target.id;

    switch(element_id)
    {
     case "right":
     case "left":
          toggle_week(element_id);
          switch_direction(element_id);
          break;
     default:
    }
  }
}

[gRoberts]

You could use

rightobj.onclick = function() {
init.call(direction);
}

this will pass the direction as a parameter to the init function, thus removing the need to use events to get the information.

Might be a place to start.

[gRoberts]

actually it could be worth posting a little more code, as my previous post could be confusing. If you can post a little more code, we may be able to tell you where to put what.

[siteguru]

function switch_direction(direction)
{
  var leftobj = document.getElementById("left");
  var rightobj = document.getElementById("right");

  if(element_id == "right")

Where has element_id suddenly materialised from? Should it not be this?

  if(direction == "right")

[pwee167]

Siteguru that was a mistake, you are correct with your correction, i have updated the original post. I got the script working, took the whole day. Not too bad for picking up JS only yesterday.

I've moved onto taking the response from a php script and adding elements onto the page. I can see xml (if possible) being of great use, but alas the deadline is fast approaching! Bring on string manipulation!

I would appreciate your thoughts on the second design question. Since the post i discovered event bubbling which seems like a good solution. Does event bubbling work with both IE 6+ and FF?