How do I get the property values from an object appended to a div?

Question

I am building an object oriented connect four game in Javascript/jQuery, for an assignment. The board was built using an array of 'chip' objects. I looped through the array and dynamically created a div for each object and appended the object to the div. Each div has a click event on it, so that when a player clicks a 'square' the event is triggered. I need to be able to access each objects property values when this event is triggered, but can't figure out how to do it. I checked out -> this <- answer, but it doesn't work for me because each object does not have a name to reference, only the div it is in which has a couple classes depending on it's state. How would I go about getting it's values?

here is the code from my board object which created the array of chip objects, it's divs, and appends them:

var gameBoard = [
[0, 1, 2, 3, 4, 5, 6],
[0, 1, 2, 3, 4, 5, 6],
[0, 1, 2, 3, 4, 5, 6],
[0, 1, 2, 3, 4, 5, 6],
[0, 1, 2, 3, 4, 5, 6],
[0, 1, 2, 3, 4, 5, 6]
];



    var board = {
        coordinates: [],
        newBoard: [],
        owner: null,

        makeChips: function(){  

            for(var i = 0; i < gameBoard.length; i++){ //iterate array
                var row = gameBoard[i];
                for(var x = 0; x < gameBoard[i].length; x++){ //iterate subarrys
                    var newRow = [];
                    var chip = new Chip(); //make it a chip object
                    chip.coordinates = [i,x]; //assign coordinates for testing win
                    newRow.push(chip);//push chip object into new Board 
                    this.newBoard.push(newRow);
                }
            }
        },

        makeBoard: function(){
            var makeBoard = $("#board"); //grab the board div from the DOM
            for(var i = 0; i < this.newBoard.length; i++){
                var row = this.newBoard[i];
                for(var x = 0; x < row.length; x++){
                        var makeDiv = $("<div>").attr("class", "chip empty"); //make a new div for each chip object
                        makeDiv.append(row[x]); //attach the chip object to a specific div //<---- ?? am i appending the actual object ??
                        makeBoard.append(makeDiv); //append div to board
                }
            }   
        }           

    };

And here is the version of the event handler I am using to test how to get the values - based on the solutions I have seen thus far on SO:

$(function(){
    var start = $("#start");
    var gameBoardDiv = $("#board"); //grab all board divs
    board.makeChips();
    board.makeBoard();


    gameBoardDiv.on("click", ".chip",function(event){
        var target = $(event.target); //returns the div clicked
        var targetData = $(target).data("obj", chip);

        alert(targetData.data("obj").coordinates);



    }); // chips event listener

});

What I am getting in console is an 'chip is undefined' message when I refer to the object as it was named in the makeChips() function and and alert saying 'undefined' if i capitalize the Chip (because it is then referring to the Chip constructor I think).

Any help is appreciated!

Answer 1

chip is function local variable and hence its scope is limited to within makeChips function. If you want to use it across functions then either define the variable out of function or pass its reference to other functions wherever required.

Answer 2

When you defined chip originally here...

        for(var i = 0; i < gameBoard.length; i++){ //iterate array
            var row = gameBoard[i];
            for(var x = 0; x < gameBoard[i].length; x++){ //iterate subarrys
                var newRow = [];
                var chip = new Chip(); //make it a chip object
                chip.coordinates = [i,x]; //assign coordinates for testing win
                newRow.push(chip);//push chip object into new Board 
                this.newBoard.push(newRow);
            }
        }

... it will be only accessible locally (within that function body). In order to make the variable accessible in your handler, you can add it to the board object (or some other global object), like this:

        for(var i = 0; i < gameBoard.length; i++){ //iterate array
            var row = gameBoard[i];
            for(var x = 0; x < gameBoard[i].length; x++){ //iterate subarrys
                var newRow = [];
                board.chip = new Chip(); //make it a chip object, add it to a global object 
                board.chip.coordinates = [i,x]; //assign coordinates for testing win
                newRow.push(board.chip);//push chip object into new Board 
                this.newBoard.push(newRow);
            }
        }

Then in your handler at the bottom, you should be able to access it again like this:

        var targetData = $(target).data("obj", board.chip);

That should at least take care of the undefined issue you mentioned.