Need some help - loop array appendChild o- code attached
Here I am. I'm trying to append a tile that was dynamically created by tileSet into a dynamically created tr and table. The tileSet works. Map breaks. Why? :'(
Code:
function map(numCellsX, numCellsY, tileset, mapData)
{
this.map = document.createElement('table');
this.map.style.position = 'absolute';
this.map.style.top = '0px';
this.map.style.left = '0px';
this.tileset = tileset;
this.row = [];
this.mapData = mapData;
this.popMap = function()
{
this.tileset.makeTiles();
alert(this.tileset.tile[3] + 'gyff');
var yCount = 0;
var xCount = 0;
for(i = 0; i <= ((numCellsX * numCellsY) - 1); i++)
{
if (i <= 0)
{
this.row[yCount] = document.createElement('tr');
}
if (xCount >= numCellsX)
{
alert('stage1');
this.map.appendChild(this.row[yCount]);
xCount = 0;
yCount++;
//alert(this.map.row[yCount] + '$$$');
}
this.row[yCount].appendChild(this.tileset.tile[this.mapData[i]]);
//alert(this.row.hasChildNodes());
xCount++;
}
}
this.showMap = function()
{
this.popMap();
document.getElementById('main').appendChild(this.map);
}
}
function tileSet(imgSrc, numCellsX, numCellsY)
{
this.img = [];
this.tile = [];
this.makeTiles = function()
{
var xCount = 0;
var yCount = 0;
for (i = 0; i <= ((numCellsX * numCellsY) - 1); i++ )
{
//alert(xCount);
if (xCount >= numCellsX)
{
yCount++;
xCount = 0;
}
this.img[i] = new Image();
this.img[i].src = imgSrc;
this.img[i].style.position = 'relative';
this.img[i].style.left = ((this.img[i].width/numCellsX) * (-xCount)) + 'px';
//alert(this.img[i].style.left);
this.img[i].style.top = ((this.img[i].height/numCellsY) * (-yCount)) + 'px';
this.tile[i] = document.createElement('td');
this.tile[i].style.width = (this.img[i].width/numCellsX) + 'px';
this.tile[i].style.height = (this.img[i].height/numCellsY) + 'px';
this.tile[i].style.overflow = 'hidden';
this.tile[i].appendChild(this.img[i]);
xCount++
}
}
}
//------once Icall showMap(), it breaks.------
var out = new tileSet('tiles.png', 16, 12);
var thing = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var town = new map(3, 3, out, thing);
town.showMap();
Last edited by dreamcaster; 11-14-2012 at 08:44 PM..
Reason: added relevant code.
I believe that 'this' will refer to 'window' in 'this.popMap()'.
Code:
this.showMap = function()
{
var that = this;
that.popMap();
document.getElementById('main').appendChild(that.map);
}
__________________
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
Validate your HTML and CSS
Goos, thanks. You'be helped a lot. Changing the code up again...
Now here is the new problem... Why can't I append img to cell?all the alerts fire off but when I try to append img to cell, it comes back undefined.
There was also the fact that I was missing tbody. Shame on me for not studying the table dom structure.
Code:
this.showMap = function()
{
tileset.makeTiles();
alert(tileset.img[2] + 'gyff');
var yCount = 0;
var xCount = 0;
var count = 0;
var tbody = document.createElement('tbody');
alert(tbody);
for(i = 0; i <= (cellsY - 1); i++)
{
this.row[yCount] = document.createElement('tr');
alert(this.row[yCount] + ' stg1');
for(j = 0; j <= (cellsX - 1); j++)
{
var cell = document.createElement('td');
//alert(cell[xCount]);
alert(cell + ' lame');
var data = mapData[count];
var img = tileset.img[data];
alert(img + '+ image');
//here is where im stuck now--
cell.appendChild(img);
alert(cell.img + ' g');
this.row[yCount].appendChild(cell[xCount]);
alert(this.row[yCount].cell[xCount] + ' walks');
count++;
xCount++;
}
tbody.appendChild(row);
yCount++;
}
this.map.appendChild(tbody);
document.getElementById('main').appendChild(this.map);
}
alert(cell.img + ' g'); // will throw an error. // alert(cell.getElementsByTagName('img')[0] == img)
this.row[yCount].appendChild(cell[xCount]); // cell already points to the current cell. // this.row[yCount].appendChild(cell);
alert(this.row[yCount].cell[xCount] + ' walks'); // idem // alert(this.row[yCount].cell + ' walks');
count++;
xCount++;
}
tbody.appendChild(row); // you don't have a variable called row // tbody.appendChild(this.row[yCount]);
The goal of this script was to to take a tileset image, slice it up and keep note of the position of each tile, then take that tile and arrange it in a table to make a map. It's all dynamic. All you give for the tileset is the image source, how many cells x and how many cells y. The map object does all the work with slicing and positioning. Thanks to everyone! Especially goos!
Before you post, read our: 
Need some help - loop array appendChild o- code attached
