Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Location
    Italy, Reggio Emilia, Campegine
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript Parental access... how to?

    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
    Last edited by bruce965; 08-17-2011 at 07:25 AM. Reason: Resolved

  • #2
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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);
    	};
    }

  • #3
    New to the CF scene
    Join Date
    Aug 2011
    Location
    Italy, Reggio Emilia, Campegine
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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();

  • #4
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by waiicodingforum; 08-16-2011 at 09:58 AM.

  • #5
    Regular Coder
    Join Date
    Aug 2010
    Posts
    972
    Thanks
    19
    Thanked 212 Times in 210 Posts
    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>

  • #6
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,346
    Thanks
    11
    Thanked 589 Times in 570 Posts
    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);
    	};
    }
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #7
    New to the CF scene
    Join Date
    Aug 2011
    Location
    Italy, Reggio Emilia, Campegine
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •