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 10 of 10
  1. #1
    New Coder
    Join Date
    Jan 2008
    Posts
    36
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Function has no properties.

    Heya people, well I have this function...

    Code:
     	<script type="text/javascript">
    var divs = ['firstdiv', 'seconddiv', 'thirddiv', 'fourthdiv', 'fifthdiv']; 
        function changeBGColor(a){ 
            for(i=0; i<divs.length; i++){ 
            document.getElementById(divs[i]).style.backgroundImage = 'url(../images/catalogue/slot_mask.png)'; 
            } 
        document.getElementById(a).style.backgroundImage = 'url(../images/catalogue/selector.png)'; 
        }
    </script>
    ...and when I look at the error in FireBug, it says that document.getElementById(divs[i]) has no properties and I was wondering, what is wrong with it?

    Please help people...

  • #2
    Regular Coder
    Join Date
    Mar 2006
    Posts
    728
    Thanks
    35
    Thanked 132 Times in 123 Posts
    Run the script onload, or place it in the body of the page,after you define the elements the script needs.

  • #3
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,743
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi there Remotive,

    and a warm welcome to these forums.

    There is nothing wrong, with the snippet of code that you have posted.

    As I did not have the benefit of your images or the rest of the page markup, I had to test it with my own...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <base href="http://mysite.orange.co.uk/azygous/">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    #container div {
        width:100px;
        height:100px;
        background-image:url(images/anim.gif);
        border:1px solid #000;
        margin:2px;
        cursor:pointer;
     }
    </style>
    
    <script type="text/javascript">
    window.onload=function(){
       var mydiv=document.getElementById('container').getElementsByTagName('div');
    for(var c=0;c<mydiv.length;c++) {
    mydiv[c].onclick=function() {
       changeBGColor(this.id);
       }
      }
     }
    
    var divs = ['firstdiv', 'seconddiv', 'thirddiv', 'fourthdiv', 'fifthdiv']; 
    
    function changeBGColor(a){ 
    for(i=0; i<divs.length; i++){ 
       document.getElementById(divs[i]).style.backgroundImage = 'url(images/anim.gif)'; 
     } 
       document.getElementById(a).style.backgroundImage = 'url(images/anim2.gif)'; 
     }
    </script>
    
    </head>
    <body>
    
    <div id="container">
     <div id="firstdiv"></div>
     <div id="seconddiv"></div>
     <div id="thirddiv"></div>
     <div id="fourthdiv"></div>
     <div id="fifthdiv"></div>
    </div>
    
    </body>
    </html>
    
    You will see that the only change to your script, that I have made, is the insertion of my images.

    coothead

  • #4
    New Coder
    Join Date
    Jan 2008
    Posts
    36
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by coothead View Post
    Hi there Remotive,

    and a warm welcome to these forums.

    There is nothing wrong, with the snippet of code that you have posted.

    As I did not have the benefit of your images or the rest of the page markup, I had to test it with my own...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <base href="http://mysite.orange.co.uk/azygous/">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    #container div {
        width:100px;
        height:100px;
        background-image:url(images/anim.gif);
        border:1px solid #000;
        margin:2px;
        cursor:pointer;
     }
    </style>
    
    <script type="text/javascript">
    window.onload=function(){
       var mydiv=document.getElementById('container').getElementsByTagName('div');
    for(var c=0;c<mydiv.length;c++) {
    mydiv[c].onclick=function() {
       changeBGColor(this.id);
       }
      }
     }
    
    var divs = ['firstdiv', 'seconddiv', 'thirddiv', 'fourthdiv', 'fifthdiv']; 
    
    function changeBGColor(a){ 
    for(i=0; i<divs.length; i++){ 
       document.getElementById(divs[i]).style.backgroundImage = 'url(images/anim.gif)'; 
     } 
       document.getElementById(a).style.backgroundImage = 'url(images/anim2.gif)'; 
     }
    </script>
    
    </head>
    <body>
    
    <div id="container">
     <div id="firstdiv"></div>
     <div id="seconddiv"></div>
     <div id="thirddiv"></div>
     <div id="fourthdiv"></div>
     <div id="fifthdiv"></div>
    </div>
    
    </body>
    </html>
    
    You will see that the only change to your script, that I have made, is the insertion of my images.

    coothead
    Thank you so much for the warm welcoming, but sad to say your code did not work for me, I don't know why either I just keep getting the same error.

  • #5
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    hrm.... this is most commonly caused by different casing between the ids and the ids used for the lookup... for example

    Code:
     
    document.getElementById("happy").style
    will give you the same message on

    Code:
     
    <div id="Happy"></div>
    <div id="HAPPY"></div>
    <div id="hAppy"></div>
    etc., the only one it will actually work on is

    Code:
     
    <div id="happy"></div>
    so be absolutely certain about the cases used. also, if the location you're attempting to change the backgrounds from is in a different window (ie, a popup, or different frame maybe) the syntax to access the containing element is different as well.

    if you could please post the full code you're having issues with, if in fact they remain issues hereafter, it would be most helpful.

    i too would like to welcome you to the forum, we hope you enjoy your stay. the continental breakfast is from 7am-9am your time, checkin is at 3pm and check out is at 11am. if you need anything else, the front desk is open until 10:30pm
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender

  • #6
    New Coder
    Join Date
    Jan 2008
    Posts
    36
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Code:
    <style type="text/css">
    <!--
    div {
    position: relative;
    width: 61px;
    height: 61px;
    background-image: url(../images/catalogue/slot_mask.png);
    }
    -->
    </style> 
    <script type="text/javascript">
    var divs = new Array("firstdiv", "seconddiv", "thirddiv", "fourthdiv", "fifthdiv"); 
        function changeBGColor(a){ 
            for(i=0;i<divs.length;i++){ 
            document.getElementById(divs[i]).style.backgroundImage = 'url(../images/catalogue/slot_mask.png)'; 
            } 
        document.getElementById(a).style.backgroundImage = 'url(../images/catalogue/selector.png)'; 
        }
    </script>
    <div id="firstdiv" onclick="changeBGColor('firstdiv');">content</div>
    <div id="seconddiv" onclick="changeBGColor('seconddiv');">content</div>
    <div id="thirddiv" onclick="changeBGColor('thirddiv');">content</div>
    <div id="fourthdiv" onclick="changeBGColor('fourthdiv');">content</div>
    That is the I am using (full oage by the way).

    Hope this helps you sort out any problems.

  • #7
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,743
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi there Remotive,
    ...but sad to say your code did not work for me
    I am really sorry to hear this.

    I tested it in IE6, IE7, Opera 9, Safari 3 and Firefox 2 without any problems.

    Is it possible that you are the proud possessor of some obscure obstinate browser.

    coothead

  • #8
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    [ICODE]var divs = new Array("firstdiv", "seconddiv", "thirddiv", "fourthdiv", "fifthdiv");/ICODE]
    change to
    var divs = ["firstdiv", "seconddiv", "thirddiv", "fourthdiv", "fifthdiv"];

    if you need a further debugging tool put
    alert(divs[i]);
    just inside the for loop, it will inform you of the name it will be performing the lookup by.

    and just out of curiosity, if you don't actually have the document structured..

    Code:
     
    <html>
    <head>
    <!-- your style and script here -->
    </head>
    <body>
    <!-- your divs -->
    </body>
    </head>
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender

  • #9
    New Coder
    Join Date
    Jan 2008
    Posts
    36
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Yeah, I have now structed the page and changes the code but still nothing...

  • #10
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    clear the cache on the browser you're testing
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender


  •  

    Posting Permissions

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