Develop Reference

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?

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.

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>

Looping through a set of <p>'s one at a time

I'm trying to figure out how to count the number of p's so every time the button is pressed, it outputs to 0 to 1 until the maximum number of p's is counted.
var big_number = 999999;
var i;
var a = document.getElementsByTagName("p");
function function0() {
for (i=0; i < big_number; i++) {
document.getElementsByTagName("p")[i].innerHTML="text";
}
}
I want it to write to another p every time the button is pressed.

document.getElementsByTagName("p").length // number of p elements on the page
Is that what you were asking?

Make a generic tag adder function then call it:
function addTags(tagName,start, max, container) {
var i = start;
for (i; i < max; i++) {
var newp = document.createElement(tagName);
newp.innerHTML = "paragraph" + i;
container.appendChild(newp);
}
}
var tag = 'p';
var big_number = 30;
var i;
var a = document.getElementsByTagName(tag );
// **THIS is your specific question answer**:
var pCount = a.length;
var parent = document.getElementById('mydiv');
addTags(tag,pCount , big_number, parent);
// add 10 more
a = document.getElementsByTagName(tag );
pCount = a.length;
big_number = big_number+10;
addTags(tag,pCount , big_number, parent);
EDIT:
NOTE: THIS might be better, only hitting the DOM once, up to you to determine need:
function addTagGroup(tagName, start, max, container) {
var tempContainer = document.createDocumentFragment();
var i = start;
for (i; i < max; i++) {
var el = document.createElement(tagName);
el.textContent = "Paragraph" + i;
tempContainer.appendChild(el);
}
container.appendChild(tempContainer);
}

To find out how many <p> elements there are in the document you should use DOM's length property as below :-
var numP = document.getElementsByTagName("P").length;
or
var div = document.getElementById("myDIV");
var numP = div.getElementsByTagName("P").length;
To get number of element inside a tag.

dat.GUI create multiple buttons with same name

I try to use dat.GUI to create multiple buttons all with same name "ShowCoord", is this possible? What I have currently is:
for (i = 0; i < overlay.numElements; i ++)
{
var length = overlay.elementNumVertices[i];
var subObj = {
'name' : overlay.elementNames[i],
'index' : i,
'numVertices': overlay.elementNumVertices[i],
"ShowCoord" : function(){
console.log("i is " + subObj['index']);
var verts = overlay.elementVertices[i];
for(var j = 0; j < subObj['numVertices']; j ++)
{
console.log("The coordinates are " + verts[3*j] + ", "+ verts[3*j+1] +", "+verts[3*j+2]);
}
}
};
subObjArray.push(subObj);
}
for(i = 0; i < subObjArray.length; i ++)
{
var currObj = subObjArray[i];
var subGui = gui.addFolder(currObj['name']);
subGui.add(currObj, 'numVertices');
subGui.add(currObj, "ShowCoord");
}
I now have the correct currObj['name'] and currObj['numVertices'] displayed. But all the "ShowCoord" button only contains information of the very last subObj (so console.log("i is " + subObj['index']) will print out 148 every time even if I click different button). How can I make it work? Thanks a lot!

Try moving subGui outside the for loop and modifiy you code so that you don't reassign subGui varialbe.
var subGui = new dat.GUI();
for(i = 0; i < subObjArray.length; i ++)
{
var currObj = subObjArray[i];
subGui.addFolder(currObj['name']);// <--- work on this line
subGui.add(currObj, 'numVertices');
subGui.add(currObj, "ShowCoord");
}
Otherwise it will always be redefined with the last iterated element of for loop
Note: This is just a hint, I can't conclude more from your code.

How do I create n canvases from within Javascript?

I am looking for a way to create canvases as I need them at run time. my code so far is
var isCanv = new Array();//bool array for which places in the arrays are/are not in use
var canv = new Array();//for the canvases
var ctx = new Array();//for the contexts
var inhtml = new Array();//for the html canvas tags for each canvas
var upperBound = -1;//the highest index used so far
function createCtx(){
var i = 0;
while(isCanv[i]){
i++;
}
inhtml[i] = '<canvas id="canv'+i+'" width="'+800+'px" height="'+800+'px" style="display:block;background:#ffffff+;"></canvas>';
isCanv[i] = true;
if(i>upperBound){
upperBound = i;
}
var tohtml = '';
for(var j = 0; j<= upperBound; j++){
if(isCanv[i]){
tohtml+=inhtml[j];
}
}
document.getElementById('game').innerHTML=tohtml;
canv[i] = document.getElementById('canv'+i);
ctx[i] = canv[i].getContext('2d');
return(i);
}
function keyEvent(event) {
var i = 0;
while(isCanv[i]){
ctx[i].fillStyle="#00FFFF";
ctx[i].fillRect(0,0,800,800);
i++;
}
}
and the html looks like this
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>redicated</title>
</head>
<body style="background:#333333;" onkeydown="keyEvent(event)">
<div id="game"></div>
<script src="game.js"></script>
</body>
</html>
This works for the first canvas, but any subsequent addition breaks it all.
Does anyone know how I could fix this, or of a better way of doing it?
Edit:
I figured it out. I need to recreate the context every time there is an addition. now my code looks like
function createCtx(){
var i = 0;
while(isCanv[i]){
i++;
}
inhtml[i] = '<canvas id="canv'+i+'" width="'+800+'px" height="'+800+'px" style="display:block;background:#ffffff+;"></canvas>';
isCanv[i] = true;
if(i>upperBound){
upperBound = i;
}
var tohtml = '';
for(var j = 0; j<= upperBound; j++){
if(isCanv[j]){
tohtml+=inhtml[j];
}
}
document.getElementById('game').innerHTML=tohtml;
for(var j = 0; j<= upperBound; j++){
if(isCanv[j]){
canv[j] = document.getElementById('canv'+j);
ctx[j] = canv[j].getContext('2d');
}
}
return(i);
}

The for loop:
for(var j = 0; j<= upperBound; j++){
if(isCanv[i]){
tohtml+=inhtml[j];
}
is only ran once since when it is first executed j == upperBound. To fix this try removing
if(i>upperBound){
upperBound = i;
}
and whats the point of upperBound anyways it will always be equivalent to i so why not just use that.

Use for loop to create mulitiple variables?

I want to use for loop to create multiple variables.
I want to create
var node0 = document.getElementById("refresh_table_0");
node0.innerHTML="";
var node1 = document.getElementById("refresh_table_1");
node1.innerHTML="";
var node2 = document.getElementById("refresh_table_2");
node2.innerHTML="";
this is my imagination code:
for(i=0;i<3;i++){
var node+i = document.getElementById("refresh_table_i");
node+i.innerHTML="";
}

First, this is javascript.
Second, the imagined code has errors, should be ("refresh_table_" + i).
Try using js arrays instead.
var node = new Array();
for(i=0;i<3;i++){
node[i] = document.getElementById("refresh_table_" + i);
node[i].innerHTML="";
}

To just initialize all the items, you can simply do this as there's no need to retain each separate DOM object:
var node;
for (var i = 0; i < 3; i++) {
node = document.getElementById("refresh_table_" + i);
node.innerHTML = "";
}
Or, even just this:
for (var i = 0; i < 3; i++) {
document.getElementById("refresh_table_" + i).innerHTML = "";
}