madmenyo Posted May 22, 2010 Share Posted May 22, 2010 Hey, I am totally new to javascript and i want to create a interactive map for my PHP game. Obviously i will not be able to just code it instantly so i wanna do this step by step and first let java draw a map from an Array for me. Unfortunately but expected i can't even pull this off . Firebug gives me (error: parentDiv is null) stated in the function addImage this function gets called by another function renderTileMap div parent stated in this function should feed the attribute. Mind, i rewritten the code from another another file that has a simple tile map and lets a player move a character. I have looked thorugh the whole code for things i forgot to include but can't find anything. Offcourse i did include the open.jp and wall.jpg. Am i close? Or am i totally off with this and should i start javascript with something more easy? -EDIT-Error: parentDiv is null Source File: file:///C:/xampp/htdocs/projects/java/myfirstmap/tilemap.html Line: 31 <html> <title>My first tile map</title> <head> <script language="JavaScript"> function addImage(parentDiv, elementName, filename, x, y, height, width) { elementName = document.createElement("img"); elementName.src = filename; elementName.style.position = 'absolute'; elementName.style.left = x + 'px'; elementName.style.top = y + 'px'; elementName.style.width = width + 'px'; elementName.style.height = height + 'px'; elementName.style.right = x + width + 'px'; elementName.style.bottom = y + height + 'px'; parentDiv.appendChild(elementName); } tileMap = [ [1 ,1 ,1 ,1 ,1], [1 ,0 ,0 ,0 ,1], [1, 0, 0, 0, 1], [1, 0, 0, 0, 1], [1, 1 ,1 ,1 ,1], ]; images = new Array(); images[0] = "open.jpg"; images[1] = "wall.jpg"; function renderTileMap(tileMap, tiles, width, height, tileWidth, tileHeight) { var divParent = document.getElementById('ParentImage'); for(y = 0; y < height; y++) //Loop Height for(x = 0; x < width; x++) //Loop Width { addImage(divParent, tiles[y * width + x], images[tileMap[y][x]], x * tileWidth, y * tileHeight, tileWidth, tileHeight); } } window.onload = renderTileMap(tileMap, images, 5, 5, 32, 32); </SCRIPT> </HEAD> <BODY> <DIV ID="ParentImage"></DIV> </BODY> </HTML> Quote Link to comment Share on other sites More sharing options...
madmenyo Posted May 22, 2010 Author Share Posted May 22, 2010 It seems i have solved it. window.onload = renderTileMap(tileMap, images, 5, 5, 32, 32); //last line of the script If i delete this and put a onload in the body element it DOES show the map i have drawn. <BODY onLoad="renderTileMap(tileMap,images,5,5,32,32)"> Whats the difference between the 2? why won't my images get loaded with the javascript and they do if i put the function in the body? Does this have consequences in the future for when i want to make a character move or have the window only show 3*3 images? Or for anything else related to further build with this script? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.