...

View Full Version : Function has no properties.



Remotive
04-22-2008, 07:13 PM
Heya people, well I have this function...




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


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


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



document.getElementById("happy").style

will give you the same message on



<div id="Happy"></div>
<div id="HAPPY"></div>
<div id="hAppy"></div>

etc., the only one it will actually work on is



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

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

coothead

mjlorbet
04-22-2008, 08:28 PM
var divs = new Array("firstdiv", "seconddiv", "thirddiv", "fourthdiv", "fifthdiv");/ICODE]
change to
[ICODE]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..



<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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum