Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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; 09-05-2007 at 04:41 AM.

  • #2
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Any one?

  • #3
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,827
    Thanks
    19
    Thanked 157 Times in 148 Posts
    looking for something like this? This will programmatically attach onclick events to many divs at once from within your JS code (this is to give you the idea):

    Code:
     
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html lang=en>
    <head>
     <title></title>
     <meta name="robots" content="noindex,nofollow" />
     <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
     <style type="text/css">
     div {width:200px;padding:20px;cursor:hand;background-color:#eee;margin:15px 0}
     </style>
    <head>
    <body>
    <div>Blah1</div>
    <div>Blah2</div>
    <div>Blah3</div>
    <div>Blah4</div>
    <div>Blah5</div>
    <div>Blah6</div>
    
    <br />
    <p id="count" style="font:bold 20px Times;color:red;text-indent:20px">1</p>
    <script type="text/javascript">
    function AttachAllDivEvents()
    {
     var divCollection = document.getElementsByTagName("div");
     for (var i=0; i<divCollection.length; i++)
     {
      AttachDivClickEvent(divCollection[i]);
     }
    }
    function AttachDivClickEvent(divObj)
    {
     divObj.onclick = function()
     {
      document.getElementById("count").innerHTML = parseInt(document.getElementById("count").innerHTML) + 1;
     };
    }
    window.onload = AttachAllDivEvents;
    </script>
    
    </body>
    </html>
    Last edited by chump2877; 09-05-2007 at 07:46 AM. Reason: fleshed out example better...
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪


  •  

    Posting Permissions

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