javascript appendChild

Ixonal

New Member
Messages
29
Reaction score
0
Points
0
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

Banned
Messages
1,389
Reaction score
12
Points
0
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

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
@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'.

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.
 

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
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

New Member
Messages
29
Reaction score
0
Points
0
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

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
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.

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.

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

New Member
Messages
29
Reaction score
0
Points
0
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
 
Top