SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Adding an onclick event to a div from within javascript

    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.

    Code:
    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.

    Code:
    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:
        }
      }
    }
    Last edited by pwee167; Sep 5, 2007 at 07:40.

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


  3. #3
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


  4. #4
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,609
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Code:
    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?

    Code:
      if(direction == "right")
    Ian Anderson
    www.siteguru.co.uk

  5. #5
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •