Public Group

# [javascript] Why does this not execute? [update: javascript somehow gave me eczema!?]

This topic is 3752 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Recommended Posts

Hi, I'm writing something in javascript and I'm getting a runtime error. here is the function:
		function randomise()
//method used: go through each cell, and swap its image with a random cell.
{
var x,y;
for(x=1; x<5; x++)
for(y=1; y<5; y++){
var toname;
toname = 'cell_'+x+""+y; //extra empty strings to ensure it evaluates to a string. dynamic typing yuck...
var fromname;
fromname = 'cell_'+(get_random(4)+1)+""+(get_random(4)+1);

var tocell = document.images[tocell];
var fromcell = document.images[fromcell];

var swap = fromcell;
fromcell.src=tocell.src;
tocell.src=swap.src;

document.writeln("Swapping image in cell " + toname + " with image in random cell " + fromname +"<br>");
}
return;
}


I get the error "Error: fromcell has no properties". I know that it exists, because this is the entire code:
<?xml version="1.0" encoding = "iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<title>
Gavins Slider Puzzle
</title>
<script type="text/javascript">

var missing_cellx;
var missing_celly;

function change_image(cellx,celly,imagex,imagey)
{

}

function click_cell(cellx,celly)
//either swaps the clicked cell with the correct one, or
{
if(1)//you clicked the empty cell
return;

if(1)//IF cell is adjacent to missing cell
{
//change_image(cell_x,cell_y,missing_cellx,missing_celly)
}
else if(1)//IF cell is in same column as missing cell
{
if(1)//IF cell is below missing cell
{
//click_cell(x,y-1);
//click_cell(x,y);
}
else//ELSE
{
//click_cell(x,y+1);
//click_cell(x,y);
}
}
else if(1)//ELSE IF cell is in same row as missing cell
{
if(1)//IF cell is left of missing cell
{
//click_cell(x-1,y);
//click_cell(x,y);
}
else
{
//click_cell(x+1,y);
}
}
}

function test_victory()
{
return false;
}

function get_random(highest)
{
var ranNum= Math.floor(Math.random()*highest);
return ranNum;
}

function randomise()
//method used: go through each cell, and swap its image with a random cell.
{
var x,y;
for(x=1; x<5; x++)
for(y=1; y<5; y++){
var toname;
toname = 'cell_'+x+""+y; //extra empty strings to ensure it evaluates to a string. dynamic typing yuck...
var fromname;
fromname = 'cell_'+(get_random(4)+1)+""+(get_random(4)+1);

var tocell = document.images[tocell];
var fromcell = document.images[fromcell];

var swap = fromcell;
fromcell.src=tocell.src;
tocell.src=swap.src;

document.writeln("Swapping image in cell " + toname + " with image in random cell " + fromname +"<br>");
}
return;
}

function solve()
{
return;
}

function draw_puzzle()
{

}
</script>

<div id="puzzle" class="body_text">
<table>
<tr>
<td><img id="cell_11" src="missing.png" alt="click to move" onclick="click_cell(1,1)"/></td>
<td><img id="cell_21" src="missing.png" alt="click to move" onclick="click_cell(2,1)"/></td>
<td><img id="cell_31" src="missing.png" alt="click to move" onclick="click_cell(3,1)"/></td>
<td><img id="cell_41" src="missing.png" alt="click to move" onclick="click_cell(4,1)"/></td>
</tr>

<tr>
<td><img id="cell_12" src="missing.png" alt="click to move" onclick="click_cell(1,2)"/></td>
<td><img id="cell_22" src="missing.png" alt="click to move" onclick="click_cell(2,2)"/></td>
<td><img id="cell_32" src="missing.png" alt="click to move" onclick="click_cell(3,2)"/></td>
<td><img id="cell_42" src="missing.png" alt="click to move" onclick="click_cell(4,2)"/></td>
</tr>

<tr>
<td><img id="cell_13" src="missing.png" alt="click to move" onclick="click_cell(1,3)"/></td>
<td><img id="cell_23" src="missing.png" alt="click to move" onclick="click_cell(2,3)"/></td>
<td><img id="cell_33" src="missing.png" alt="click to move" onclick="click_cell(3,3)"/></td>
<td><img id="cell_43" src="missing.png" alt="click to move" onclick="click_cell(4,3)"/></td>
</tr>

<tr>
<td><img id="cell_14" src="missing.png" alt="click to move" onclick="click_cell(1,4)"/></td>
<td><img id="cell_24" src="missing.png" alt="click to move" onclick="click_cell(2,4)"/></td>
<td><img id="cell_34" src="missing.png" alt="click to move" onclick="click_cell(3,4)"/></td>
<td><img id="cell_44" src="missing.png" alt="click to move" onclick="click_cell(4,4)"/></td>
</tr>

</table>
<input id="butn_randomise" type="button" value="Randomise" onclick="randomise()">
<input id="butn_solve" type="button" value="Solve" onclick="solve()">
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10-blue"
alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
</p>

</div>
</body>
</html>


The element in question is at the bottom. I've run the function without accessing any document objects and it IS generating the correct names: Swapping image in cell cell_11 with image in random cell cell_31 Swapping image in cell cell_12 with image in random cell cell_34 Swapping image in cell cell_13 with image in random cell cell_24 Swapping image in cell cell_14 with image in random cell cell_44 Swapping image in cell cell_21 with image in random cell cell_42 Swapping image in cell cell_22 with image in random cell cell_44 Swapping image in cell cell_23 with image in random cell cell_24 Swapping image in cell cell_24 with image in random cell cell_31 Swapping image in cell cell_31 with image in random cell cell_44 Swapping image in cell cell_32 with image in random cell cell_33 Swapping image in cell cell_33 with image in random cell cell_42 Swapping image in cell cell_34 with image in random cell cell_13 Swapping image in cell cell_41 with image in random cell cell_14 Swapping image in cell cell_42 with image in random cell cell_43 Swapping image in cell cell_43 with image in random cell cell_42 Swapping image in cell cell_44 with image in random cell cell_32 Anybody know why this is occuring? It has me baffled. [Edited by - speciesUnknown on February 13, 2008 11:56:51 PM]

##### Share on other sites
toname = ...fromname = ...var tocell = document.images[tocell];var fromcell = document.images[fromcell];

Look at the underlined values.

##### Share on other sites
Oops, sorry. that was an error resulting from trying to debug it, the original function looked like this:

		function randomise()		//method used: go through each cell, and swap its image with a random cell.		{			var x,y;			var fromname;			var toname;			var tocell;			var fromcell;			var swap;			for(x=1; x<5; x++)			for(y=1; y<5; y++){				toname = 'cell_'+x+y; 				fromname = 'cell_'+(get_random(4)+1)+(get_random(4)+1);				tocell = document.images[toname];				fromcell = document.images[fromname];				swap = fromcell.src;				fromcell.src=tocell.src;				tocell.src=swap;				document.writeln("Swapping image in cell " + toname + " with image in random cell " + fromname +"<br>");			}			return;		}

The error is

Error: fromcell has no properties.
Source File: file:<censored>/index.html Line: 86

Strangely, its behind by one line number, as line 86 actually refers to the line that says "fromcell = document.images[fromname];". Clicking the error takes me to the correct line. ("swap = fromcell.src;")

Might the line number problem and the runtime error be related?

Thanks for your help, BTW. My tutors are all asleep :-)

##### Share on other sites
I'm also concerned by a couple other things:

document.images['cell_11'].src="pa_11.png";

this has no effect. The image does not change. Putting a writeln in the function confirms that it does execute.

also, any use of the writeln function completely blanks the page and destroys everything on the screen, and I just get the results of writeln.

What's going on here? Have I missed something fundamental?

##### Share on other sites
Quote:
 Original post by speciesUnknownWhat's going on here? Have I missed something fundamental?

Very.

Writing to a document that has already loaded without calling document.open() will automatically perform a document.open call. This effectively creates a new document. What you want to do is create a new DOM node and set the innerHTML property of the element.

As for why your swap function is failing, it's because use of a textual identifier to subscript the document.images collection requires that said identifier have been set as the name property of the image, not id. i.e., instead of:
<img id="cell_14" src="missing.png" alt="click to move" onclick="click_cell(1,4)"/>
use:
<img name="cell_14" src="missing.png" alt="click to move" onclick="click_cell(1,4)"/>

##### Share on other sites
That's kind of strange, all the examples I've seen so far use ID. (e.g. this one so I naturally thought document.images[] would use ID. Clearly it doesn't.

I've given up on that function for a while to do something more simple. Here is the end of the script and the beginning of the BODY tag:
		function click_cell(cellx,celly)		{			document.getElementById('cell_11').src="pa_11.png";			//document.writeln("test - you clicked a button<br>");		}	</script>		</head>		<body>		<div id="puzzle" class="body_text">		<table>			<tr>				<td><img id="cell_11" src="missing.png" alt="click to move" onclick="click_cell(1,1)"/></td>				<td><img id="cell_21" src="missing.png" alt="click to move" onclick="click_cell(2,1)"/></td>				<td><img id="cell_31" src="missing.png" alt="click to move" onclick="click_cell(3,1)"/></td>				<td><img id="cell_41" src="missing.png" alt="click to move" onclick="click_cell(4,1)"/></td>			</tr>				<tr>				<td><img id="cell_12" src="missing.png" alt="click to move" onclick="click_cell(1,2)"/></td>				<td><img id="cell_22" src="missing.png" alt="click to move" onclick="click_cell(2,2)"/></td>				<td><img id="cell_32" src="missing.png" alt="click to move" onclick="click_cell(3,2)"/></td>				<td><img id="cell_42" src="missing.png" alt="click to move" onclick="click_cell(4,2)"/></td>			</tr>				<tr>				<td><img id="cell_13" src="missing.png" alt="click to move" onclick="click_cell(1,3)"/></td>				<td><img id="cell_23" src="missing.png" alt="click to move" onclick="click_cell(2,3)"/></td>				<td><img id="cell_33" src="missing.png" alt="click to move" onclick="click_cell(3,3)"/></td>				<td><img id="cell_43" src="missing.png" alt="click to move" onclick="click_cell(4,3)"/></td>			</tr>				<tr>				<td><img id="cell_14" src="missing.png" alt="click to move" onclick="click_cell(1,4)"/></td>				<td><img id="cell_24" src="missing.png" alt="click to move" onclick="click_cell(2,4)"/></td>				<td><img id="cell_34" src="missing.png" alt="click to move" onclick="click_cell(3,4)"/></td>				<td><img id="cell_44" src="missing.png" alt="click to move" onclick="click_cell(4,4)"/></td>			</tr>			</table>		<input name="butn_randomise" type="button" value="Randomise" onclick="randomise()">		<input name="butn_solve" type="button" value="Solve" onclick="solve()">		<p>		    <a href="http://validator.w3.org/check?uri=referer"><img		        src="http://www.w3.org/Icons/valid-xhtml10-blue"	        alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>		</p>							</div>	</body>

When I click any of the images, they call click_cell(). I know this is being called by putting a writeln in there. But image_11 is not being changed, in fact nothing happens, and I don't get any errors on the javascript console. There is nothing worse, when you're learning a language, than nothing happening and no error message.

I plan to give up shortly, as I've made no progress in 3 hours. (in fact ive gone backwards, because changing the image on it being clicked USED to work, and I don't remember what i did differently!)

oh, and I'm still being told the wrong line number for the error. I know this because the error ALWAYS refers to objects being mentioned on the next line, and sometimes it tells of errors on lines that are blank, or only contain comments.

Something is working against me here. I've now run out of ideas.

Thanks, Oluseyi, for all your help, but I am clearly out of my depth as far as DOM is concerned.

##### Share on other sites
The reason click_cell does nothing is because the new image you're setting the src to has not been loaded into the browser's cache. Try this:
function click_cell(cellx,celly){  var newImg = new Image()  newImg.src = "pa_11.png"  document.getElementById('cell_11').src = newImg.src;}

##### Share on other sites
Don't give up. Sometimes you encounter tough problems, which require that you learn a bunch of background things before you can solve your immediate problem. It's a part of development; learn to embrace it - or at least tolerate it.

Happy hacking!

##### Share on other sites
Thanks for you help, but still NOTHING happens. I put in a writeln to debug and cell_11's image has been changed. (This was the case before).
But it doesn't update on the screen. the image changes its src but no change is apparent. I've run out of ideas and I think I'll just badger my tutors over this next week. (we only get 2 hrs per week of javascript tutorials). This problem has actually somehow made my eczema worse... I've decided that I hate javascript.

In short, thanks very very much for your help but I give up.

##### Share on other sites
Quote:
 Original post by OluseyiDon't give up. Sometimes you encounter tough problems, which require that you learn a bunch of background things before you can solve your immediate problem. It's a part of development; learn to embrace it - or at least tolerate it.Happy hacking!

<stressed reason1="pissed off" reason2="4 hours on one little bug" value="a lot" on_dont_give_up="smash keyboard against monitor">

I won't give up forever, I just need some realtime help with debugging it. ( I still hate javascript, however.)
I've spent 4 hours and only managed to break what I had already.

Now I need to go to the doctor over my eczema. How can a software bug cause eczema? Adding a physics engine to my game project was less stressful than this.
</stressed>

• 40
• 15
• 10
• 23
• 10