SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    This would work in PHP...

    What is wrong? I don't get it. Again, I think it might be a problem with scope or some other hidden nuance of javascript's that I'm still having issues getting to grips with. Here's the code:
    Code:
    window.onload = function() {
      var curimg = document.getElementById('curimg');
      var imgsarr = document.getElementsByTagName('a');
      for (var i = 0; i < imgsarr.length; i++) {
        var anchor = imgsarr[i];
        var anchorhref = anchor.getAttribute('href');
        var relatt = String(anchor.getAttribute('rel'));
        if (relatt.match('s')) {
          anchor.onclick = function() {        
            curimg.src = anchorhref;
            return false;
          }
        }
      }
    }
    I have a full-size image with some thumbnails underneath (wrapped in anchors). When one of these is clicked, the full-size image appears in place of the previous one. However, when any of them is clicked, the full-size image is only the last one. I can sort of see why this is happening, but can't see why is should do. Here's the HTML:
    HTML Code:
    <div id="a">
    <img src="misc/IMG_4135.jpg" id="curimg" />
    <div>
    <a href="misc/IMG_4135.jpg" rel="s"><img src="misc/thumbs/IMG_4135.png" /></a>
    <a href="misc/IMG_4171.jpg" rel="s"><img src="misc/thumbs/IMG_4171.png" /></a>
    <a href="misc/IMG_4290.jpg" rel="s"><img src="misc/thumbs/IMG_4290.png" /></a>
    <a href="misc/IMG_4316.jpg" rel="s"><img src="misc/thumbs/IMG_4316.png" /></a>
    </div>
    </div>
    Thanks in advance.

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When the onclick event occurs and the function runs, it uses the most recent value of anchorhref.

    Fortunately this has a simple solution in your case, other times it's more tricky:
    Code:
          anchor.onclick = function() {        
            curimg.src = this.getAttribute("href");
            return false;
          }

  3. #3
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks jim, that's perfect. I still don't really get why, though. Shouldn't the value of anchorhref be written over each iteration? After all, it's all within the loop, so the most recent value of anchorhref I would expect to be the most recent in that iteration. Hopefully you get what I mean and what I'm confused about.

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    What is in the loop is code to create a series of functions. The value that fields defined within a function will use are the values at the time the function is called and not the values they had at the time the function was created. That's why using code in the function to retrieve the current value of the wanted field works while referencing a variable that has since been used for something else doesn't.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Right, I understand. Thanks felgall.

    But what if I don't want this to occur on an onclick event and instead I want to do something like append a child or change the style of that element on window load? So, for instance, if relatt matches 's', then the background colour of that element is changed. I.e.:
    Code:
    window.onload = function() {
      var curimg = document.getElementById('curimg');
      var imgsarr = document.getElementsByTagName('a');
      for (var i = 0; i < imgsarr.length; i++) {
        var anchor = imgsarr[i];
        var relatt = String(anchor.getAttribute('rel'));
        if (relatt.match('s')) {
          anchor.style.background = 'red';
        }
      }
    }
    The variable will be overwritten if the anchor that matches 's' is not the last one in the array. How do I do this?


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
  •