Creating an array of objects in javascript with individual values

Question

I have a problem with my javascript code. I use a loop which executes this function a couple of times.

addGameButton = function(color,id) {
        gameButton[gameButton.length] = new GameButton(color,id);
      };

So I have an array of GameButton objects called gameButton. I am trying to add new gamebuttons which each have a different color and id. However, all the objects end up having the same values. I assume there's something wrong they way I am assigning values to array. Below is the whole example.

function GameButton(c, i) {
  color = c;
  id = i;
  markup = '<div class="'+i+'"></div>';

  this.getColor = function () {
    return color;
  };
  this.getMarkup = function () {
    return markup;
  };
}

function GameBoard() {
  gameButton = new Array();

  addGameButton = function(color,id) {
    gameButton[gameButton.length] = new GameButton(color,id);
  };

  this.createGameBoard = function (color) {

    color = ["red", "green", "blue"];
    addButtons(color);
  };

  addButtons = function (color) {
    var i = 0;
    for (i=0; i <color.length; i++) {
      addGameButton(color[i],i);
    }
  };

  this.getGameButton = function (index) {
    return gameButton[index];
  };
}

$(document).ready(function(){
  gameBoard = new GameBoard();
  gameBoard.createGameBoard();

  b = gameBoard.getGameButton(0);
  console.log(b.getColor());
  // returns blue instead of red, also getGameButton(1) has the same values
});

gameButton.length? gameButton[] = new GameButton(color,id); — Flash Thunder
– Flash Thunder, Commented Aug 11, 2013 at 11:25
Try changing gameButton[gameButton.length] = new GameButton(color,id); to gameButton.push(new GameButton(color,id)); — ep0
– ep0, Commented Aug 11, 2013 at 11:26

Khanh TO · Accepted Answer · 2013-08-11 11:47:51Z

The problem is you're assigning values to your global window object in many places and they overwrite each other which causes a mess. You need to create variables locally to fix this problem. Take a look at the revised code with comments explaining what have changed.

function GameButton(c, i) {
  var color = c; //use var to avoid assigning this variable  to window object
  var id = i; //use var to avoid assigning this variable  to window object
  var markup = '<div class="'+i+'"></div>'; //use var to avoid assigning this variable  to window object

  this.getColor = function () {
    return color;
  };
  this.getMarkup = function () {
    return markup;
  };
}

function GameBoard() {
  //use var to avoid assigning this variable to window object
  var gameButton = new Array();

  //This will declare a local function intead of assigning the function to window object like in your code.
  function addGameButton(color,id) {
    gameButton[gameButton.length] = new GameButton(color,id);
  };

  this.createGameBoard = function (color) {

    var col = color || ["red", "green", "blue"]; //Use default ["red", "green", "blue"] if there is no color passing in
    addButtons(col);
  };

   //This will declare a local function intead of assigning the function to window     object like in your code.
  function addButtons(color) {
    var i = 0;
    for (i=0; i <color.length; i++) {
      addGameButton(color[i],i);
    }
  };

  this.getGameButton = function (index) {
    return gameButton[index];
  };
}

$(document).ready(function(){
  //Declare a local variable.
  var gameBoard = new GameBoard();
  gameBoard.createGameBoard();

  var b = gameBoard.getGameButton(0);
  console.log(b.getColor());

});

Bergi · Accepted Answer · 2013-08-11 11:27:53Z

1

You need to learn to use local variables. Currently color, id and markup are implicit global variables which are set and read from ever GameButton instance.

Use a var statement to declare them as local to the constructor.

answered Aug 11, 2013 at 11:27

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Collectives™ on Stack Overflow

Creating an array of objects in javascript with individual values

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related