¿Hay alguna forma de nombrar una var usando una especie de "Array"? Mi código es este:

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]);
}

Sé que mi código no funciona, pero quiero implementar la misma idea para poder obtener un resultado de esto:

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

También intenté hacer un "Concentration" var, pero no funcionó. ¿Cómo hago esto para que el documento no agregue el mismo cuadrado varias veces?

0
Bradley William Elko 14 nov. 2017 a las 23:57

2 respuestas

La mejor respuesta
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);

Este ejemplo hace lo que desea utilizando un objeto en lugar de una matriz, pero cumple con su deseo de crear dinámicamente Square1, Square2, etc. accesibles ... Todos están contenidos en Square. En la consola con este fragmento, verá que se crean 100 cuadrados y se agregan al objeto Square. Serán accesibles por Square.SquareX (donde X es un número), o Square ['SquareX'], o Square ['Square' + X] donde X es un número nuevamente.

1
Tyler Dahle 14 nov. 2017 a las 21:16

La sintaxis de su declaración no es válida. Pero, creo que el punto más importante al que está tratando de llegar es poder completar una matriz con elementos creados dinámicamente y eso puede hacer:

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>
1
Scott Marcus 14 nov. 2017 a las 21:14