Resolved Javascript Parental access... how to?

bruce965 · 08-16-2011, 08:48 AM

Hello everybody, I am new in this forum (and I'm also new in web coding, but not in programming)...
This is the first problem I met: I can't understand how to acccess a property in this snippet:

Code:

function FGGE()
{
	this.totalExternals = 0;
	this.loadedExternals = 0;

	this.loadImage = function(image)
	{
		image.onload = function()
		{
			alert("Loaded 1: "+this.loadedExternals+"/"+this.totalExternals);
		};
		alert("Loaded 2: "+this.loadedExternals+"/"+this.totalExternals);
	};
}

Output is this:
Loaded 1: NaN/undefined
Loaded 2: 0/0

Could someone help me fixing "Loaded 1"?
Thanks a lot

waiicodingforum · 08-16-2011, 09:32 AM

It's a context issue. Try the following code.

Code:

function FGGE()
{
	this.totalExternals = 0;
	this.loadedExternals = 0;

	this.loadImage = function(image)
	{
		image.onload = function()
		{
			alert("Loaded 1: "+loadedExternals+"/"+totalExternals);
		};
		alert("Loaded 2: "+this.loadedExternals+"/"+this.totalExternals);
	};
}

bruce965 · 08-16-2011, 09:37 AM

Hum... no... it doesn't work... I don't have a debugger yet, but it seems throwing an exception or something like because it just skips output for that alert();

waiicodingforum · 08-16-2011, 09:56 AM

It should work. Your issue mainly have to do with the context of "this" reference. If there isn't any reason to use "this". Try declaring your variables in the global space (i.e. the window instance).

Code:

function FGGE()
{
	window.totalExternals = 0;
	window.loadedExternals = 0;

	window.loadImage = function(image)
	{
		image.onload = function()
		{
			alert("Loaded 1: "+window.loadedExternals+"/"+window.totalExternals);
		};
		alert("Loaded 2: "+window.loadedExternals+"/"+window.totalExternals);
	};
}

This also depends on when FGGE is invoked as well. The first snippet I posted should have worked, if the above snippet in this post does not work as well. I suspect that the onload handler binding happens too late (i.e. the onload event is already fired). You can test the script validity by replacing onload with onmouseover just to see if the logic is correct.

If you would share what you are trying to achieve, perhaps I can assist you better that way.

DaveyErwin · 08-16-2011, 04:48 PM

Well I think this is what you are after ....

Code:

<html>
<head>
<script type="text/javascript">

(function(){
	var totalImages = 0;
	var loadedImages = 0;
	trackImage = function(img){
		totalImages++;
		img.onload=function(){
			loadedImages++;	
			alert("totalImages = " + totalImages + "imagesloaded = " + loadedImages);	
			}
	}
})()

var myImg1 = new Image();
var myImg2 = new Image();

trackImage(myImg1);
trackImage(myImg2);

myImg1.src = "http://javascript.daveyerwin.com/images/logo.gif";
myImg2.src = "http://javascript.daveyerwin.com/images/forum_new.gif";
</script>
</head>
<body >

</html>

rnd me · 08-16-2011, 05:36 PM

use that:

Code:

function FGGE()
{
	var that=this;
	this.totalExternals = 0;
	this.loadedExternals = 0;

	this.loadImage = function(image)
	{
		image.onload = function()
		{
			alert("Loaded 1: "+that.loadedExternals+"/"+that.totalExternals);
		};
		alert("Loaded 2: "+that.loadedExternals+"/"+that.totalExternals);
	};
}

bruce965 · 08-16-2011, 06:27 PM

Well... Thanks to waiicodingforum but I can't use a global variable... the why is pretty simple: I am using it as an object calling it with:

Code:

var myGame = new FGGE();

I am not sharing this because you could misunderstand me as a newbie trying to make something too advanced for me...
In fact this is not my whole code, but just the buggy portion, and I know how to count loaded images, but I want to do it in classes way...

To DaveyErwin sorry but I didn't understand your post...

Finally, at rnd me, that works, and I consider this pretty awesome, I never had such an idea!