javascript appendChild

**Ixonal** · 07-24-2009 10:16 PM

lil snippet from one of my functions in a project I'm workin on. now see, the first part here works, but the second part won't append msgArea to area, but it will append it to body. I have no idea what the problem is, and firefox's error console doesn't tell me a thing. I know I can append to another div, cause I did it at other times in the code.

Code:

    var body = document.getElementsByTagName("body"); 
    var area = document.createElement("div"); 
    body = body[0];
    body.appendChild(area); 
    this.cardAreas[this.cardAreas.length] = area; 
    area.setAttribute("id", name); 
    area.style.position = "absolute"; 
    area.style.width = "310px"; 
    area.style.height = "200px"; 
    area.style.border = "1px solid #000000"; 
    area.style.textAlign = "center";
    area.style.font = "10pt normal sans-serif"; 
    area.active = true; 
    area.bet = 0; 
 
    //create an area for messages 
    area.msgArea = document.createElement("div");
    area.appendChild(area.msgArea); 
    area.msgArea.style.zIndex = "125"; 
    area.msgArea.style.position = "absolute"; 
    area.msgArea.style.top = "50px"; 
    area.msgArea.style.left = "0px"; 
    area.msgArea.style.width = "310px";
    area.msgArea.style.font = "30pt thick sans-serif"; 
    area.msgArea.style.textAlign = "center";
    area.msgArea.innerHTML = "pie";

odds are it's something really stupid that I'm missing here...

**~~Twinkie~~** · 07-24-2009 10:51 PM

Try this and tell me if it works, otherwise can you post a link to the entire page?

Code:

//create an area for messages 
    var msgArea = document.createElement("div");
    area.appendChild(msgArea); 
    msgArea.style.zIndex = "125"; 
    msgArea.style.position = "absolute"; 
    msgArea.style.top = "50px"; 
    msgArea.style.left = "0px"; 
    msgArea.style.width = "310px";
    msgArea.style.font = "30pt thick sans-serif"; 
    msgArea.style.textAlign = "center";
    msgArea.innerHTML = "pie";

Even though area is an object, I don't believe you can create class variables for it, or if you can you would have to use the prototype keyword: area.prototype.msgArea = document.createElement("div"). As an HTML element though, I can't be sure.

**misson** · 07-25-2009 12:28 AM

@OP: The fragment you posted works for me. Would you provide a link to a live minimal test case?

Note that you can get the body element with document.body; no need to call 'getElementsByName'.

Originally Posted by Twinkie

Even though area is an object, I don't believe you can create class variables for it, or if you can you would have to use the prototype keyword: area.prototype.msgArea = document.createElement("div"). As an HTML element though, I can't be sure.

area is an object like any other. You can use area.constructor.prototype to add "class" properties (not that JS has classes) and you can add object properties as Ixonal does.

**Ixonal** · 07-25-2009 12:42 AM

well, I uploaded the whole thing, but.... I dunno if it's just my machine, but only a few kanji (I have japanese font support) are showing up, and all of the source looks screwy.... doesn't look like that on my system O.o

http://ixonal.elementfx.com/projects...k/game2.2.html

edit: btw, the offending code is near line 500 or so

**misson** · 07-25-2009 12:51 AM

The kanji is preventing the JS from being executed, so I can't evaluate what else is going wrong. The document is also missing a <head> element and a closing tag for the <script>. What did you use to u/l the page?

Rather than posting a page with all your code, write a minimal test case and post a link to a live copy.

**Ixonal** · 07-25-2009 01:18 AM

first, there is a head and closing script tag, they're just absorbed by the kanji I think.

second, I used gftp to upload the file

third, I already did a test case, in that I've done that operation several times over and never had this issue. all of the cards in the deck object have other divs inserted into them.

**misson** · 07-25-2009 04:28 AM

Originally Posted by Ixonal

first, there is a head and closing script tag, they're just absorbed by the kanji I think.

They're sort of there. Some newline characters (looks like every one after the first few) are preceded by an extra null character, which throws off decoding UTF-16.

Originally Posted by Ixonal

second, I used gftp to upload the file

Hmm... You could try transfering in binary mode if you used ASCII mode before, but I doubt that'll fix the problem. You could also try saving the original file as ASCII rather than UTF-16 using whatever editor you used to write it.

Originally Posted by Ixonal

third, I already did a test case, in that I've done that operation several times over and never had this issue. all of the cards in the deck object have other divs inserted into them.

You misunderstand. A minimal test case is the smallest possible example you can come up with that illustrates your problem. See the link in my last post.

**Ixonal** · 07-27-2009 04:17 PM

I figured it out! apparently it won't show up if you add the msgArea to area before altering area. it works when I make and add msgArea last when making the area object

Thread: javascript appendChild

LinkBack

Thread Tools

Display

javascript appendChild

Re: javascript appendChild

Re: javascript appendChild

Re: javascript appendChild

Re: javascript appendChild

Re: javascript appendChild

Re: javascript appendChild

Re: javascript appendChild

Similar Threads

Checking if a file(url) exists using Javascript (AJAX)

Making a site JavaScript dependent - pros/cons?

drop down menus with JavaScript disabled?

javascript and external javascript files problem

XML and Javascript

Posting Permissions