Sign in to follow this  

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

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

If you intended to correct an error in the post then please contact us.

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

	<head>
		<title>
			Gavins Slider Puzzle
		</title>	
	</head>
	<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>	

	<body onload="draw_puzzle();">
		<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 this post


Link to post
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 this post


Link to post
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 this post


Link to post
Share on other sites
Quote:
Original post by speciesUnknown
What'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 this post


Link to post
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 this post


Link to post
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 this post


Link to post
Share on other sites
Quote:
Original post by Oluseyi
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!


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

Share this post


Link to post
Share on other sites
Solved it for you in about 10 minutes. The thing about document.writeln is that your writing over the document. You need to append it. To do this i simply added at the bottom
<div id="debug">


and in your randomize function I change it to
document.getElementById("debug").innerHTML = "";
for(x=1; x<5; x++) {
for(y=1; y<5; y++){
...
document.getElementById("debug").innerHTML += "Swapping image in cell " + toname + " with image in random cell " + fromname +"
";
}
}
I hope this can help your debugging.

Share this post


Link to post
Share on other sites
Now when I click the randomise button, and the function randomise is called, the page is emptied and when I look at the source I see
"You clicked something". This text does not exist anywhere in the source file therefore it is technically impossible for the text to be there. IN fact, I've removed all writeln calls from the code.

Can anybody explain that?

Perhaps I'm just too tired to use search and replace properly. Here is the 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">

<head>
<title>
Gavins Slider Puzzle
</title>
<script type="text/javascript">
var missing_cellx;
var missing_celly;

function cache_images()
//WTF we have to cache all the images? That sucks.
{
for(var x=1; x<5; x++)
for(var y=1; y<5; y++)
{
var newImg = new Image()
newImg.src = "pa" + x + "" + y+".png";
}
}

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

}




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.
{
document.open();
var x,y;

var fromname;
var toname;

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);

swap = document.getElementById(fromname).src;
document.getElementById(fromname).src=tocell.src;
document.getElementById(toname).src=swap;
}
return;
}

function solve()
{
return;
}

function draw_puzzle()
{
document.getElementById('cell_11').src="pa11.png";
}

function click_cell(cellx,celly)
{
document.getElementById('cell_21').src="pa11.png";
}

</script>
</head>

<body>



<div id="puzzle" class="body_text" onload="cache_images()">
<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>
</html>







I got round the problem of image caching using a hackish image caching function.

Adam: Thanks, your debug div works nicely.

[update]
now the function randomise() replaces the page with something completely blank.
WTF is going on here.
[update2]
no, actually it replaces it with some text my application outputted in the past, but does not exist in teh code now. (I removed ALL the writeln's).

Maybe javascript is picking up on my negative vibes and being more shite than usual?

Share this post


Link to post
Share on other sites
Finally, thanks to everybody here, I managed to solve the problems I was having, using a few hacks.

Firstly, I have to retype the URL every time I reload the page, since its not recaching properly.

Secondly, I couldn't get a function called initialise to run as the <body onload=> function, so I created a couple of extra divs and gave each one the successive piece of code that WAS in initialise.

I also had to cache all the images in the browser DURING load time, since you can't do this after the page finishes loading.

The error console STILL directs me to the wrong line of code, every time. I imagine that if I stick this on the university web server and use the w3c validator the line of code confusing it will become apparent.

javascript frustrates me to the max. Its one more nail in the coffin of me ever wanting to be a web developer. (My eczema got better overnight with a bit of hydrocortisone.)

Thanks all for your help.

Share this post


Link to post
Share on other sites

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

If you intended to correct an error in the post then please contact us.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this