position dynamically created layer?? [Archive]

Click to See Complete Forum and Search --> : position dynamically created layer??

arjeng

01-20-2003, 09:02 AM

Hi,

could anybody help me out on the following:

I'm trying to make a small game in javascript. Within this game I have a function that creates a layer when a key is pressed, and after that I want the layer to move upwards on the page. However I'm having problems addressing the newly created layer.

What I have is:

var layerCount = 0;
.....
if (key == 32) { // spacebar pressed
createLayer();
}

function createLayer() {
myID = "bullet" + layerCount;
bulletLayer = "<DIV ID='myID' style='position:absolute; LEFT:" + shipPos + "; TOP:200; WIDTH:10; HEIGHT:10; VISIBILITY: VISIBLE; Z-INDEX: 10'>";
bulletLayer += "<Img Src='ship.gif' width='10' height='10'></DIV>";

document.body.insertAdjacentHTML("BeforeEnd", bulletLayer);
shoot(myID, 50);
layerCount++;
}

function shoot(shootID, steps) {
activeLayer = shootID;
bulletPos-=4;
document.all["bullet0"].style.top = bulletPos;
steps--;
newsteps = steps;
document.myForm.bulletY.value = bulletPos;
if (steps > 0) {
setTimeout ("shoot(activeLayer, newsteps);",1);
}
}

When I execute this, I get an error saying:
"document.all["bullet0"].style" is null or not an object.

Ofcourse, ['bullet0"] should be replaced by the variable "shootID" somehow, but I don't know the exact syntax for that. That's why I just put bullet0 in there to test if the positioning works in the first place.

However, it does not work.....

Can anybody please tell me what I'm doing wrong here?

(My code probably looks a bit messy, 'cause this is the first tie I'm trying to do a bit of javascripting.)

Thanks,

ArjenG

khalidali63

01-20-2003, 09:13 AM

Since I don't have rest of your code therefore I'll try to assume your error
2 steps

first of all
in the function
function createLayer() {

change this line
myID = "bullet" + layerCount;

with this
myID = eval("bullet" + layerCount);

then

change this line
document.all["bullet0"].style.top = bulletPos;

with this
document.all[shootID].style.top = bulletPos;

I am sure if there is nothing else wrong it should work.

Khalid

arjeng

01-20-2003, 09:39 AM

Thanks for the quick reply.

I guess I must have some other error, 'cause it still doesn't work.
I now get an error in the line:

myID = eval("bullet" + layerCount);

The error is: 'bullet0' is undefined.

Maybe I should give you all the code to make it a bit clearer.

In the HEAD I have:

function init() {
//alert ("Game started");
startShip = parseInt(document.all["ship"].style.left);
//startBullet = parseInt(document.all["bullet"].style.top);
shipPos = startShip;
//bulletPos = startBullet;
bulletPos = 200;
layerCount = 0;
document.myForm.x.value = shipPos;
//document.myForm.bulletY.value = bulletPos;
}

function handle(e) {
e = window.event;
var key = e.keyCode
//alert ("Key pressed: " + key);

if (key == 39) { // rechterpijl ingedrukt
if (shipPos < 500) {
shipPos += 10;
document.all["ship"].style.left = shipPos;
}
}
if (key == 37) { // linkerpijl ingedrukt
if (shipPos > 0) {
shipPos -= 10;
document.all["ship"].style.left = shipPos;
}
}
if (key == 32) { // spatie ingedrukt
createLayer();
}
document.myForm.x.value = shipPos;
}

function shoot(shootID, steps) {
//alert(shootID);
activeLayer = shootID;
bulletPos-=4;
document.all[shootID].style.top = bulletPos;
steps--;
newsteps = steps;
document.myForm.bulletY.value = bulletPos;
if (steps > 0) {
setTimeout ("shoot(activeLayer, newsteps);",1);
}
}

function resetBullet() {
document.all["bullet"].style.visibility = "HIDDEN";
document.all["bullet"].style.top = startBullet;
document.all["bullet"].style.left = shipPos;
bulletPos = startBullet;
}

function createLayer() {
myID = eval("bullet" + layerCount);
bulletLayer = "<DIV ID='myID' style='position:absolute; LEFT:" + shipPos + "; TOP:200; WIDTH:10; HEIGHT:10; VISIBILITY: VISIBLE; Z-INDEX: 10'>";
bulletLayer += "<Img Src='ship.gif' width='10' height='10'></DIV>";

document.body.insertAdjacentHTML("BeforeEnd", bulletLayer);
shoot(myID, 50);
layerCount++;
document.myForm.myLayers.value = layerCount;
}

document.onkeydown = handle;

And the BODY:

<BODY onLoad="init();">

Can you help me out?

Cheers.

khalidali63

01-20-2003, 09:43 AM

attached the complete code in a zip file or email it to me

k_ali@shaw.ca

arjeng

01-20-2003, 10:05 AM

Thanks,

I sent you the files by email.

Cheers,

ArjenG

arjeng

01-21-2003, 08:27 AM

I'll just attach the file as well.

If anyone can help me out on this, I'll be very happy....

arjeng

01-22-2003, 06:00 AM

No one knows?? :confused:

khalidali63

01-22-2003, 04:36 PM

I think I replied to you befre...:-)
Anyways here it goes again.

You are trying to create a "bullet"+number
at the run time,which is not working properly.
I'd suggest you used DOM API to create any runtime elements
First set an id attribute for body tag
<body id="parent">
then create element
el = document.createElement("bullet"+number);
then add id attributes to it
el.setAttribute("id","bullet"+number)
add this newly created element to the body tag
document.getElementById("parent").appendChild(el);

at this point you have your newly created bullet id available in the document.
Now you can access its position let or top and re assign its co-ordinates.

hope this guides you to right direction

Khalid

arjeng

01-23-2003, 05:21 AM

Thanks for the reply Khalid. (if you replied to the email I sent earlier, I must have missed it somehow. sorry for that).

Anyway, I'll give it another go with the info you gave me, when I get back home.

I'm quite new to this stuff, but it is starting to make sense to me.... :)

Again, thanks.

ArjenG

arjeng

01-24-2003, 10:01 AM

Ok, I will get there in the end, but I'm not there yet...

So now I can crate a new DIV element by pressing a key and give it a new ID (bullet0, bullet1, etc.)
However, I'm still not able to change the position of this newly created element.

How come??

My code:

layerCount = 0;

function createLayer() {
myID = "bullet" + layerCount;
el = document.createElement(myID);
el.setAttribute("id", myID);
el.innerHTML = "<Img Src='ship.gif' width='10' height='10'>";
document.getElementById("parent").appendChild(el);

layerCount++;
shoot(myID, 50);
}

function shoot(shootID, steps) {
document.getElementById(shootID).style.top = 200;
document.getElementById(shootID).style.left = 400;
....................
}

This, however does NOT move the new element to it's new position. Please help, 'cause I'm going slightly mad....

ArjenG

Vladdy

01-24-2003, 11:29 AM

That is one ugly createLayer...
do this:

function createLayer(initX,initY)
{ with (document.getElementById("parent").appendChild(document.createElement('div')))
{ id = 'bullet' + layerCount++;
with(appendChild(document.createElement('img'))
{ src = 'ship.gif';
width = '10';
height = '10';
}
with(style)
{ position = 'absolute';
top = initY + 'px';
left = initX + 'px';
}
}
}

function moveLayerBy(layer,dX,dY)
{ with(layer.style)
{ left = (parseInt(left) + dX) + 'px';
top = (parseInt(top) + dY) + 'px';
}
}

arjeng

01-26-2003, 05:53 AM

Thanks, I've got it working now.

What I was wondering: what exactly was so ugly about it??

Anyway, it's working so I'm happy. :)

Cheers,

ArjenG