CODEWITHSUNDEEP
javascriptarraysvar
Bradley William Elko
Bradley William Elko

Reputation: 364

JavaScript: How Can I Make A Var "Array" Work?

Is there a way to name a var using a sort of "Array?" My code is this:

for(var i = 0; i < (getHorizontalSquares * getVerticalSquares); i++){
    var Square[i] = document.createElement("div");
    Square[i].style.position = "relative";
    Square[i].style.float = "left";
    Square[i].style.width = "50px";
    Square[i].style.height = "50px";
    Square[i].id = "square" + (i + 1);
    for(var ii = 0; ii < 6; ii++){
        var TestColor = TestColorArray[Math.round(Math.random()*(TestColorArray.length - 1))];
        getTestColor += TestColor;
    }
    Square[i].style.backgroundColor = "#" + getTestColor;
    SquareCont.appendChild(Square[i]);
}

I know my code doesn't work, but I want to implement the same idea so I can get a result of this:

var Square1...
var Square2...
var Square3...
var Square4...
var Square5...
etc

I also tried doing a "Concentration" var, but it didn't work. How do I do this so the document doesn't append the same square multiple times?

Upvotes: 0

Views: 58

Answers (2)

Tyler Dahle
Tyler Dahle

Reputation: 879

var Square = {};
var SquareCont = document.createElement('div');
var getHorizontalSquares = 10;
var getVerticalSquares = 10;
var TestColorArray = ['a','b','c','f','e','0','1','2','3','3','4','5'];
var getTestColor = '';
for(var i = 0; i < (getHorizontalSquares * getVerticalSquares); i++){
    Square['Square'+i] = document.createElement("div");
    Square['Square'+i].style.position = "relative";
    Square['Square'+i].style.float = "left";
    Square['Square'+i].style.width = "50px";
    Square['Square'+i].style.height = "50px";
    Square['Square'+i].id = "square" + (i + 1);
    for(var ii = 0; ii < 6; ii++){
        var TestColor = TestColorArray[Math.round(Math.random()*(TestColorArray.length - 1))];
        getTestColor += TestColor;
    }
    Square['Square'+i].style.backgroundColor = "#" + getTestColor;
    SquareCont.appendChild(Square['Square'+i]);
    getTestColor = '';
    
}
console.log(Square);

This example does what you want using an object instead of an array, but meets your desire to dynamically create accessible Square1, Square2, etc... They are all contained in Square. In the console with this snippet, you will see that 100 squares are created and added to the Square object. They will be accessible by Square.SquareX (where X is some number), or Square['SquareX'], or Square['Square'+X] where X is some number again.

Upvotes: 1

Scott Marcus
Scott Marcus

Reputation: 65883

Your declaration syntax is not valid. But, I think the larger point you are trying to get to is to be able to populate an array with dynamically created elements and that you can do:

var squares = [];  // Array must exist before you can populate it

var testColorArray = ["green", "yellow", "blue", "orange", "silver"];
var getTestColor = null;

function makeSquares(count){

  for(var i = 0; i < count; i++){
    // Just create the element and configure it. No need to worry about the array yet
    var element = document.createElement("div");
    element.style.float = "left";
    element.style.width = "75px";
    element.style.height = "75px";
    element.id = "square" + (i + 1);
    element.style.backgroundColor = testColorArray[Math.floor(Math.random()* testColorArray.length)];
    element.textContent = element.id;
    squareCont.appendChild(element);
    
    // Now, add the element to the arrray
    squares.push(element);
  }
  
  // Test:
  console.log(squares);
}

makeSquares(10);
<div id="squareCont"></div>

Upvotes: 1

Related Questions