more javascript woes. document.getElementById()

cokecan · 24 Jan 2006 at 00:56

more problems with simple things

....really hate learning javascript

anyway...ive got a table in an html file thats got a different ID for each cell (numbers 1 to 26). In the js file ive got a for loop that puts 26 image locations into an array. after putting each image location into the array its supposed to put the image into the cell in the table using the document.getElementId() function but it wont. i keep gettin errors saying its set to null or is not an object etc, and in firefox's javascript console it says it has no property.

whats goin off???

heres my code:

html (btw i have added the .js file to the html before anyone asks me that

):

Code:

</head>
<body>

<script language=javascript>
	createAlphabet();
</script>

<table border="1" <tr>
<td id="1"> </td><td id="2"> </td><td id="3"> </td><td id="4"> </td><td id="5"> </td><td id="6"> </td><td id="7"> </td><td id="8"> </td><td id="9"> </td><td id="10"> </td><td id="11"> </td><td id="12"> </td><td id="13"> </td>
</tr>
<tr>
<td id="14"> </td><td id="15"> </td><td id="16"> </td><td id="17"> </td><td id="18"> </td><td id="19"> </td><td id="20"> </td><td id="21"> </td><td id="22"> </td><td id="23"> </td><td id="24"> </td><td id="25" </td><td id="26"> </td>
</tr>
<table>

</body>
</html>

javascript:

Code:

var i;
var letter = new Array(26);
var source = "Images/";

function createAlphabet()
{
	for (i = 1; i<=26; i++)
	{
		letter[i] = source + i + ".gif";
		document.getElementById(i).innerHTML = '<img src="'+letter[i]+'">';
	}

}

GravyMonster · 24 Jan 2006 at 09:58

i got sidetracked while i was looking at this for you, so i can't remember what i changed, but this works for me....

Code:

<html>
	<head>
		<script language=javascript>	
			var letter = new Array(26);
			var source = "Images/";

			function createAlphabet() {
				for (var i = 1; i<=26; i++) {
					letter[i] = source + i + ".gif";
					document.getElementById(i).innerHTML = '<img src="'+letter[i]+'">';
				}
			}
		</script>
	</head>
	
	<body onload="createAlphabet()">
		<table border="1" <tr>
		<td id="1"> </td><td id="2"> </td><td id="3"> </td><td id="4"> </td><td id="5"> </td><td id="6"> </td><td id="7"> </td><td id="8"> </td><td id="9"> </td><td id="10"> </td><td id="11"> </td><td id="12"> </td><td id="13"> </td>
		</tr>
		<tr>
		<td id="14"> </td><td id="15"> </td><td id="16"> </td><td id="17"> </td><td id="18"> </td><td id="19"> </td><td id="20"> </td><td id="21"> </td><td id="22"> </td><td id="23"> </td><td id="24"> </td><td id="25" </td><td id="26"> </td>
		</tr>
		<table>
	</body>
</html>

roboffer · 24 Jan 2006 at 10:24

Its probably that your code is working onload, so the whole page exists. The first example will be running the javascript before the page is loaded, therefore the javascript cant find the elements in question

cokecan · 24 Jan 2006 at 12:45

perfect, that was the problem. i was calling the createAlphabet function before the table was even created. put it under it and it works fine now

thanks both of ya