SitePoint Sponsor

User Tag List

Results 1 to 23 of 23
  1. #1
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript error: 'has no properties'

    I've been working on a 'slideshow' type script for some time as I'm a bit of a javascript novice (look at the rotating images on the right-hand side):

    http://ubtemp.110mb.com/

    I have some of it working - the images and caption rotate accordingly. However the next thing I'm trying to get working is the ability to navigate to a particular slide by clicking on the links below (Roman blinds, venetian blinds etc.).

    At the moment, when clicking on a link I get the following error:

    document.getElementById("main-image") has no properties
    selectSlide(a #)slides2.js (line 88)
    onclick(click clientX=0, clientY=0)ubtemp.110mb.com (line 1)
    [Break on this error] document.getElementById('main-image').src = imagename;


    Any idea what the problem is?

    Thanks.

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,191
    Mentioned
    191 Post(s)
    Tagged
    2 Thread(s)

    main-image

    I checked the page's mark-up, there is no element with an id of "main-image".

  3. #3
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I've corrected this issue and now I get the following:

    sslink is not defined
    selectSlide(a #)slides2.js (line 93)
    onclick(click clientX=0, clientY=0)# (line 1)
    [Break on this error] document.getElementById(main-image).style.color='#333333';


    However, I'm not sure if this error is critical to the function of script; any idea what's wrong?

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,191
    Mentioned
    191 Post(s)
    Tagged
    2 Thread(s)

    bugs

    I spent some time fooling with it, and my problems seem to go back to the "new imageItem" not being defined. So I really don't have any answers, but you may have better luck tracking down the error(s) by temporarily putting in alerts before the lines throwing the errors. Then keep following it back to the source. So if sslink is undefined, test where it comes from. eg.
    HTML Code:
    	var sslink = imagename.replace(".gif", "");
    alert("sslinik: " + sslink);
    	var sslink = sslink.replace("images/", "");
    alert("sslinik: " + sslink);
    	resetLinkColours();
    	document.getElementById(sslink).style.color='#333333';

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Location
    San Francisco Bay Area
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Jonny View Post
    Thanks. I've corrected this issue and now I get the following:

    sslink is not defined
    selectSlide(a #)slides2.js (line 93)
    onclick(click clientX=0, clientY=0)# (line 1)
    [Break on this error] document.getElementById(main-image).style.color='#333333';
    I checked the script and these two lines seem strange:

    Code:
    var sslink = imagename.replace(".gif", "");
    var sslink = sslink.replace("images/", "");
    I'd try:
    Code:
    var sslink = imagename.replace(".gif", "");
    sslink = sslink.replace("images/", "");
    Not redefining the variable on the next line.
    Thierry :: @thierrykoblentz
    tjkdesign.com | ez-css.org | css-101.org

  6. #6
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the above two answers - I've tried adding alerts but don't understand what messages I'm looking for. Regarding the other point, I amended the script accordingly however this appears to have had no effect on the functionality of the script nor does it prevent the error occuring.

    Any further ideas?

    Thanks.

  7. #7
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Location
    San Francisco Bay Area
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    var imagename = image_dir+obj.id+'.gif';
    document.getElementById('slideimage').src = imagename;
    var sslink = imagename.replace(".gif", "");
    sslink = sslink.replace("images/", "");
    I think there are different issues here.
    It seems you're constructing the image path using the directory + the ID of the A element + ".gif"
    The problem is that the ID you need to grab is not in the A tag but in the LI (the parent).

    So your call:

    Code:
    selectSlide(this)
    returns no ID value.

    You could try
    Code:
    selectSlide(this.parentNode)
    So in short, you could rewrite the variables in there keeping in mind that if you want to reference the anchor you'd use:
    Code:
    this
    but to reference the parent (the LI), you'd go with:
    Code:
    this.parentNode
    For example, to grab the ID of the LI, you'd use:

    Code:
    var zID = this.parentNode.id;
    From there to get the article ID you'd go:

    Code:
    var articleid = zID.replace("main-image", "");
    Then you do the final step as it is written already:

    Code:
    document.getElementById('article'+articleid).style.display='block';
    I hope that makes sense...
    Thierry :: @thierrykoblentz
    tjkdesign.com | ez-css.org | css-101.org

  8. #8
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much for your help; apologies for my daftness but I'm a bit lost around the var 'zID = this.parentNode.id;' bit. What is 'zID' and what would this replace?

    Thanks.

  9. #9
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Location
    San Francisco Bay Area
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    zID is the string you're looking for in this function. It is the ID of the LI.
    But I made a typo in my previous post, I use the keyword "this" instead of the parameter (obj).

    So these two lines:

    Code:
    var zID = obj.parentNode.id;
    var articleid = zID.replace("main-image", "");
    would replace this:

    Code:
    var articleid = sslink.replace("slideimage", "");
    But like I said, you have a few issues in there, for example:

    Code:
    92 resetLinkColours();
    93 document.getElementById(sslink).style.color='#333333';
    94 resetLinkColours();
    95 document.getElementById(sslink).style.color='#333333';
    There is no need to repeat lines 92 and 93...

    The important thing to keep in mind is that if you call the function like this:
    selectSlide(this) you are passing a reference to the anchor, but if you call it using selectSlide(this.parentNode) then the reference is the LI.

    Depending on this choice, you need to treat the parameter (obj) accordingly.
    For example, if you call the function using selectSlide(this) then you'd retrieve the ID through "obj.parentNode.id", but if you use selectSlide(this.parentNode) then you'd go "obj.id". As the former references the A element and the latter the LI element (the parent).
    Thierry :: @thierrykoblentz
    tjkdesign.com | ez-css.org | css-101.org

  10. #10
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,191
    Mentioned
    191 Post(s)
    Tagged
    2 Thread(s)

    using alerts to troubleshoot

    I use alerts to pinpoint problem sources. doing
    Code:
    alert("text to tell me what it is/where the code is" + variable);
    allow you to see what the value of a variable is in any given place in the code.
    So if sslink is undefined or doesn't look like you expect it to, the problem is before that alert. If it looks good, the problem is after it.
    Just be careful not to put one inside a loop unless you want to close a bunch or shut your machine down to stop them.

  11. #11
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Location
    San Francisco Bay Area
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mittineague View Post
    I use alerts to pinpoint problem sources.
    With Firebug, it is possible through the script panel ("script" tab) to find out about variable values (and other references) by hovering over variables etc. with the mouse pointer. A tooltip shows what's returned.
    Thierry :: @thierrykoblentz
    tjkdesign.com | ez-css.org | css-101.org

  12. #12
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again thierry. I've implemented your recommended changes but are still no closer.

    Am I still doing something wrong?

  13. #13
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Location
    San Francisco Bay Area
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Jonny View Post
    Am I still doing something wrong?
    I think so

    Code:
    var sslink = imagename.replace(".gif", "");
    sslink = sslink.replace("images/", "");
    The above lines show that you're removing "images/" from sslink, but the path variable you declare at the top of the JS file is "/images/slides2/". So it looks like you end up with "slides2/" attached to the ID string. To check this, you can simply use an alert() as Mittineague suggested:
    Code:
    alert(sslink);
    after the two lines above.

    Anyway, you may skip these lines by replacing "sslink" with "obj.id", like this:
    Code:
    document.getElementById(obj.id).style.color='#333333';
    that should work, or at least you should be error-free
    Thierry :: @thierrykoblentz
    tjkdesign.com | ez-css.org | css-101.org

  14. #14
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am indeed error free, and it does half-work! Thanks!

    It stops the script from 'rolling' and it also changes the caption accordinly. However, the image does not change - what do I need to make this bit work?

    p.s.

    I really appreciate the time you've spent helping me here - I really do.

  15. #15
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Location
    San Francisco Bay Area
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Jonny View Post
    However, the image does not change - what do I need to make this bit work?
    If the image does not change it is because the script uses an ID that corresponds to the parent DIV, not to the image...

    The image ID is "rImage", but as you can see beow the script uses "slideimage":
    Code:
    document.getElementById('slideimage').src = imagename;
    So changing the line above to:
    Code:
    document.getElementById('rImage').src = imagename;
    Should make that whole thing work... Hopefully

    BTW, to avoid the page to jump when users click on these links, you should replace your "selectSlide()" calls with:

    onclick="selectSlide(this.parentNode);return false;"
    Thierry :: @thierrykoblentz
    tjkdesign.com | ez-css.org | css-101.org

  16. #16
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Theirry, that's absolutely brilliant! Worked a treat! Thanks!

    There's just one final piece of the script I haven't yet got working. As the images rotete, I wanted the navigation links to revert to their :hover state. There's something in the script that changes the colour of the link text, but I haven't even managed to get that working.

    Any ideas? (This will be the last thing, I promise. )

  17. #17
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,191
    Mentioned
    191 Post(s)
    Tagged
    2 Thread(s)

    revert link state

    This may have more to do with your CSS file. The pseudo-classes must be in a certain order to "work".
    hover has to be after link and visited, and active has to be after hover

  18. #18
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Location
    San Francisco Bay Area
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To change the text color, replace this:
    Code:
    document.getElementById(sslink).style.color='#333333';
    With this:
    Code:
    document.getElementById(sslink).firstChild.style.color='#f06';
    That should do it...
    Thierry :: @thierrykoblentz
    tjkdesign.com | ez-css.org | css-101.org

  19. #19
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Location
    San Francisco Bay Area
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Jonny View Post
    Any ideas? (This will be the last thing, I promise. )
    To change the text color, replace this:
    Code:
    document.getElementById(sslink).style.color='#333333';
    With this:
    Code:
    document.getElementById(sslink).firstChild.style.color='#f06';
    That should do it...

    PS: sorry this is a re-post as the original one ended up way higher in this thread (must have clicked the wrong button).
    Thierry :: @thierrykoblentz
    tjkdesign.com | ez-css.org | css-101.org

  20. #20
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again. This works but there are a couple of things:

    1. The styles don't change back when that link is no longer active
    2. How can I change either more than one aspect (i.e. color and background) or the class of the active element?

    Ta.

  21. #21
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Location
    San Francisco Bay Area
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Jonny View Post
    1. The styles don't change back when that link is no longer active
    This is very trivial. I believe there is a function in the script that is called to reset things, just use it for that too.

    2. How can I change either more than one aspect (i.e. color and background) or the class of the active element?
    imho, swapping classes is the best aproach.
    You can set a class name like this:

    Code:
    document.getElementById(sslink).firstChild.className='whatever';
    Thierry :: @thierrykoblentz
    tjkdesign.com | ez-css.org | css-101.org

  22. #22
    SitePoint Addict Jonny's Avatar
    Join Date
    Mar 2003
    Location
    Norwich, UK
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again. That's got everything working now, although I notice it doesn't work in IE7 (And maybe IE6, I don't have it installed).

    Anyone got any ideas?

    Ta.

  23. #23
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Location
    San Francisco Bay Area
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think the issue comes from the rotateImage() function. If you notice, the error shows up when the page loads, before you've clicked on anything.

    IE seems to choke on line 70:
    Code:
    document[place].src = new_image;
    Thierry :: @thierrykoblentz
    tjkdesign.com | ez-css.org | css-101.org


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
  •