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 4 of 4

Thread: onClick

  1. #1
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question onClick

    This code relates to some display = 'none' / display = 'block' CSS-toggled calendars I have. Since they're visible by default, in case Javascript is disabled, I'm adding the "show calendar/hide calendar" link dynamically, since it would be useless to someone without Javascript.

    My trouble is this: I'm trying to loop through each calendar and add a unique toggler for each, but I can't figure out how to correctly pass unique parameters for each onclick event. What's happening is that when onclick is executed for any of the togglers outputted, it uses the variable reference I specify, when what I'm aiming at, rather, is to pass the variable's value at each iteration of the for loop instead. Is my English making sense?

    Below is my code, with the problematic line emboldened. calz stands for calendars.

    Code:
    var calz = document.getElementsByTagName('table');
    for (var i=0; i<calz.length; i++) {
      if (calz[i].className != 'calendar') continue;
      var anchor = document.createElement('a');
      anchor.setAttribute('href', 'javascript:void(0)');
      anchor.id = calz[i].id + 'Toggle';
      anchor.onclick = function(){toggle(calz[i])};
      var img = document.createElement('img');
      img.setAttribute('src', 'calendar.jpg');
      anchor.appendChild(img);
      anchor.appendChild(document.createTextNode(' [show calendar]'));
      calz[i].parentNode.insertBefore(anchor, calz[i]);
      }
    Thanks for any help! I'm a newb with Javascript.

    Doctor Colossus
    Last edited by Doctor Colosssu; 01-17-2009 at 08:02 AM.

  • #2
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    BTW, to give a more clear idea of what I'm trying to do -- the goal of this code is to generate the equivalent of the following XHTML before each calendar, with the appropriate ID relative to the calendar itself's ID (i.e. anchor.id = calz[i].id + 'Toggle';), and the appropriate parameter for my toggle() function -- that being the calendar's ID:

    Code:
    <a href="javascript:void(0)" onclick="function(){toggle(calz[i])">
    <img src="calendar.jpg" /> [show calendar]
    </a>
    What happens is that toggle() executes for each toggler using the last loop iteration's value -- in my current case it turns out to be calz[2] for all three. Instead, the first one should execute calz[0], or it's value, the second one calz[1], or its value, etc. How can I turn the variable calz[i] into a static parameter for each iteration of the loop?
    Last edited by Doctor Colosssu; 01-17-2009 at 08:38 AM.

  • #3
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    And o damn... I signed up here only a moment ago, and just noticed that I made a typo in my handle! I was very tired... If any admins happen by here, I'd appreciate if you could fix it. Humbly, DC
    Last edited by Doctor Colosssu; 01-17-2009 at 07:45 AM.

  • #4
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Well, I solved the problem. I was hoping someone else might think of something while I was taking a break. But it seems I've completed this saga solo... unless and until someone points out superior ways of doing things.

    For anyone curious, I simply replaced:
    Code:
    anchor.onclick = function(){toggle(calz[i])};
    with:
    Code:
    anchor.onclick = toggle;
    Then modified the toggle function, which previously took an element object as a parameter, like so:
    Code:
    function toggle() {
          var e = document.getElementById(this.id.replace('Toggle',''));
            if(e.style.display == 'block') {
              e.style.display = 'none';
              document.getElementById(e.id + 'Toggle').lastChild.nodeValue = " [show calendar]";
              return false;
              }
            else {
              e.style.display = 'block';
              document.getElementById(e.id + 'Toggle').lastChild.nodeValue = " [hide calendar]";
              return false;
              }
            }
    The original code I posted, which runs when the DOM's finished loading, generates anchors with IDs based on the calendars they're intended to affect (i.e. 'startCal' & 'startCalToggle'). I was perusing Javascript: The Definitive Guide, by David Flanagan, and discovered the this keyword, which points to the element calling the function. Using its magick, I simply got the ID of the calling anchor, re-subtracted the word 'Toggle', which was earlier appended to the ID to differentiate it from the calendar's, and GotElementById from within the toggle function.

    Aloha to all.


  •  

    Tags for this Thread

    Posting Permissions

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