Function has no properties.

Remotive · 04-22-2008, 07:13 PM

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...

mrhoo · 04-22-2008, 07:59 PM

Run the script onload, or place it in the body of the page,after you define the elements the script needs.

coothead · 04-22-2008, 07:59 PM

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

Remotive · 04-22-2008, 08:04 PM

Quote:

Originally Posted by coothead

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.

mjlorbet · 04-22-2008, 08:14 PM

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

Remotive · 04-22-2008, 08:23 PM

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.

coothead · 04-22-2008, 08:25 PM

Hi there Remotive,

Quote:

...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

mjlorbet · 04-22-2008, 08:28 PM

[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>

Remotive · 04-23-2008, 03:14 PM

Yeah, I have now structed the page and changes the code but still nothing...

mjlorbet · 04-23-2008, 03:28 PM

clear the cache on the browser you're testing