Question

This is my first SO post. I’m eternally grateful for the information this community has and shares. Thanks.

I’m coming from Flash and I’m not even sure what the right question to ask is. All I can do is lay out my code example and then explain what I am trying to do. I do not fully grasp the terms that I am trying to illustrate here so I feel it is best to omit them.

The code below is incomplete as it only includes the parts that I feel are relevant to my question. Please refer to the comments in my code to see my issue.

EDIT: Full source file here: [link removed] The console.log outputs the issue in question.

    <script type="text/javascript"> 
    var a_chests = [];
    var chestID = 0;

    //I'm creating a plugin to be able to make multiple instances
    (function ($) {
        $.fn.chestPlugin = function (option) {
            //This function creates a master sprite object which many of my sprites will use
            //I've simplified the features to get to the heart of my question
            var DHTMLSprite = function (params) {
                var ident = params.ident,
                var that = {
                    getID: function(){
                        return ident;
                    }
                };
                return that;
            };

            //ChestSprite inherits DHTMLSprites properties and then adds a few of its own
            var chestSprite = function(params) {
                var ident = params.ident,
                that = DHTMLSprite(params);
                that.reveal=function(){
                    console.log(ident);
                };

                return that;
            };

            //Here I create multiple instances of the chests
            var treasure = function ( $drawTarget,chests) {
                for (i=0;i<chests;i++){
                    var cs = chestSprite({
                        ident: "chest"+chestID
                    })
                    console.log(cs.reveal()) 
                    //This logs "chest0", "chest1", "chest2" as the for loop executes
                    //This behavior is correct and/or expected!

                    a_chests[chestID]={id:i,ob:cs};
                    //I add a reference to the new chestSprite for later

                    chestID++;
                    //increment the chestID;
                }
                console.log(a_chests[1].ob.reveal());
                //This always logs "chest2" (the last chest that is created), even though
                //the logs in the for loop were correct. It seems it is referencing the
                //DHTML object (since the DHTMLSprite function returns that;) and since 
                //there is no reference to which chest I need, it passes the last one.

                //Is there any way I can pass a reference to DHTMLSprite in order to retain
                //the reference to the three individual chests that are created?

                //Is there another solution altogether? Thanks!!!
            };

            //The rest of the code.
            return this.each(function () {
                var $drawTarget = $(this);
                treasure($drawTarget,3);
            });
        };
        })(jQuery);


        </script>

Answer 1

You forgot to declare `that’ as a local variable, so it’s being overwritten on each iteration.

    var chestSprite = function(params) {
      var that;
      var animInterval;
      ...