SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    May 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post Setting the "className" property for an anchor tag

    Hello,

    I have a script that slideshows 5 images. Below the images is a numbered list; 1-5. I'd like to set the style of the number buttons based on the image being displayed as the images scroll from one to the next.

    Here is the page I'm working on: http://wisetopic.com

    The images in question are the rectangular boxes that says "Send it likes its Hot", etc.

    I try to change the class name like so:

    Code:
    document.getElementById('promoLink2').className = "on";
    but I get this error:

    Code:
    document.getElementById("promoLink2") has no properties
    http://wisetopic.com/_inc/js/landingPage.js
    Line 679
    Here is the full code sample for the photo slideshow:

    Code:
    function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
        this.pausecheck=pause
        this.mouseovercheck=0
        this.delay=delay
        this.degree=10 //initial opacity degree (10%)
        this.curimageindex=0
        this.nextimageindex=1
        fadearray[fadearray.length]=this
        this.slideshowid=fadearray.length-1
        this.canvasbase="canvas"+this.slideshowid
        this.curcanvas=this.canvasbase+"_0"
        if (typeof displayorder!="undefined")
        theimages.sort(function() {return 0.5 - Math.random();}) 
        this.theimages=theimages
        this.imageborder=parseInt(borderwidth)
        this.postimages=new Array() //preload images
        for (p=0;p<theimages.length;p++){
           this.postimages[p]=new Image()
           this.postimages[p].src=theimages[p][0]
           document.getElementById('promoLink2').className = "on";
    }
    Notice these lines - ideally I want to use the array index to choose which number button is selected, something like this:

    Code:
           
           document.getElementById('promoLink'+[p]).className = "on";
           ... /* do stuff to set the rest of the buttons to no style
    Thank you in advance for your help!

    JQ

  2. #2
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you get this error just as the page is loading? If so, you might be calling this script before the page has loaded. Call the scripts from body.onload instead, or in a <script> tag near the bottom of the page.

    If not, what does the HTML for the promoLink2 look like?
    Hello World

  3. #3
    SitePoint Member
    Join Date
    May 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the function works fine, its just when I add this line, does the code choke:

    document.getElementById('promoLink2').className = "on";

    jq

  4. #4
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The original suggestion was correct - you are referencing an un-rendered element:
    Code:
    <script type="text/javascript">
    This >>   new fadeshow(fadeimages,453,190,0,6000,1)
                        </script>
    
                    </div>
    				<div class="checkitout"><a href="#"><span class="push">check it out</span></a></div>
    				<ul>
    
    					<li id="promoctrl_back"><a href="#"><span class="push">back</span></a></li>
    					<li id="promoctrl_img1"><a id="promoLink1" href="#" class="on"><span class="push">image 1</span></a></li>
    Addresses this >>   <li id="promoctrl_img2"><a id="promoLink2" href="#"><span class="push">image 2</span></a></li>
    Tab-indentation is a crime against humanity.


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
  •