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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Angry Script works but JavaScript null error - Help!

    Hello,

    I hope you can help me, I have used a really simple image script which features 3 thumbnails, you click one thumbnail and it loads the image as a larger image.

    Works perfectly in Google Chrome, Firefox - and then I've come to try in IE8... works perfect BUT javascript error as follows: -

    Webpage error details

    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; GTB6.6; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; MDDC; InfoPath.2; .NET4.0C)
    Timestamp: Fri, 31 Dec 2010 17:14:48 UTC

    Message: 'document.images.image0' is null or not an object
    Line: 13
    Char: 1
    Code: 0




    Here is the code, what am I doing wrong? I can't spot it, theres a couple of threads online from 2005 about this script but none have helped me clear the error.

    Code:
    <html>
    <head>
     
    <script language="JavaScript"> 
    image0 =new Image();
    image1 =new Image();
    image2 =new Image();
     
    image0.src ="http://ec.europa.eu/information_society/activities/egovernment/images/project_logos/sample.jpg"
    image1.src ="http://ec.europa.eu/information_society/activities/egovernment/images/project_logos/sample.jpg"
    image2.src ="http://ec.europa.eu/information_society/activities/egovernment/images/project_logos/sample.jpg"
     
    document.images['image0'].src=image0.src;
    document.images['image1'].src=image1.src;
    document.images['image2'].src=image2.src;
     
    function image_click(clicks)
    {
    if(clicks==0){document.images['large'].src=image0.src;}
    if(clicks==1){document.images['large'].src=image1.src;}
    if(clicks==2){document.images['large'].src=image2.src;}
    }
    </script>
     
    </head>
     
    <body>
     
    <a href="javascript:image_click(0)"><img src="http://ec.europa.eu/information_society/activities/egovernment/images/project_logos/sample.jpg" height="93" width="123" alt="" name="image0" border="0"/></a>
    <a href="javascript:image_click(1)"><img src="http://ec.europa.eu/information_society/activities/egovernment/images/project_logos/sample.jpg" width="123" alt="" name="image1" border="0"/></a>
    <a href="javascript:image_click(2)"><img src="http://ec.europa.eu/information_society/activities/egovernment/images/project_logos/sample.jpg" height="93" width="123" alt="" name="image2" border="0"/></a>
    <img src="http://ec.europa.eu/information_society/activities/egovernment/images/project_logos/sample.jpg" align="middle" border="0" width="418" height="284" name="large">
     
    </body>
    </html>
    Last edited by 87dave87; 12-31-2010 at 11:19 PM.

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    You're running inline code prior to the rendering of the elements that it references.
    Also avoid using global variables whose names match element names or IDs.

  • #3
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry I am new to this, can you explain

  • #4
    Regular Coder Nile's Avatar
    Join Date
    Jun 2008
    Posts
    280
    Thanks
    2
    Thanked 46 Times in 46 Posts
    E.g., you should put the script under the images

  • #5
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, I tried that with the same result =/

  • #6
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by 87dave87 View Post
    Yes, I tried that with the same result =/
    As I said, global variables must not match element names or IDs:
    Code:
    <html>
    <head>
     
     
    </head>
     
    <body>
     
    <a href="javascript:image_click(0)"><img src="http://ec.europa.eu/information_society/activities/egovernment/images/project_logos/sample.jpg" height="93" width="123" alt="" name="image0" border="0"/></a>
    <a href="javascript:image_click(1)"><img src="http://ec.europa.eu/information_society/activities/egovernment/images/project_logos/sample.jpg" width="123" alt="" name="image1" border="0"/></a>
    <a href="javascript:image_click(2)"><img src="http://ec.europa.eu/information_society/activities/egovernment/images/project_logos/sample.jpg" height="93" width="123" alt="" name="image2" border="0"/></a>
    <img src="http://ec.europa.eu/information_society/activities/egovernment/images/project_logos/sample.jpg" align="middle" border="0" width="418" height="284" name="large">
    
    <script type='text/javascript'> 
    _image0 = new Image();
    _image1 = new Image();
    _image2 = new Image();
     
    _image0.src ="http://ec.europa.eu/information_society/activities/egovernment/images/project_logos/sample.jpg"
    _image1.src ="http://ec.europa.eu/information_society/activities/egovernment/images/project_logos/sample.jpg"
    _image2.src ="http://ec.europa.eu/information_society/activities/egovernment/images/project_logos/sample.jpg"
     
    document.images['image0'].src=image0.src;
    document.images['image1'].src=image1.src;
    document.images['image2'].src=image2.src;
     
    function image_click(clicks)
    {
     if(clicks==0){document.images['large'].src=_image0.src;}
     if(clicks==1){document.images['large'].src=_image1.src;}
     if(clicks==2){document.images['large'].src=_image2.src;}
    }
    </script>
    
     
    </body>
    </html>

  • #7
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's great thank you very much, happy new year


  •  

    Posting Permissions

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