/    Sign up×
Community /Pin to ProfileBookmark

Trying to use DOM2 dynamic element creations

But it fails, the elements won’t display, and usually even without any error message. Just can’t figure out why because when I verify the variables most of them contain what’s expected:

[CODE]
var d=document.createElement(“div”);
var j=0;
var height=window.innerHeight/255;

function div(){

for(i=0;i<400;i++) {
d.setAttribute(“style”,”margin:0px”);
d.style.width=”100%”;
d.style.height=height;
d.style.border=”1px solid black”;
}

document.body.appendChild(d);
}

onload=div;[/CODE]

Variable “d” exists only outside the funtion declaration. When I type in “alert(d)” inside the funtion nothing happens. But when I do it prior to or after the function block it works. So this seems to be a variable scope issue (Maybe I’ve forgotten some) although I can’t see how or why; the variables are global and must therefore be accessible within the function div() as well, isn’t that so?
Not only that, but the 400 div elements that are created within the loop don’t display yet there’s no error messages indicating any error. I even tried to verify by using “alert(d.getAttribute(“style”)”, and it worked; all the properties were displayed. Problem is there’s either only one div or none.

[COLOR=DarkRed]What am I doing wrong here? Something obvious to you guys perhaps?
I’m a DOM2 beginner. It looks so easy and logical though, yet all these problems…If the div element exisists within the code, why’s not appeneded to the page with document.body.appendChild(d)?)[/COLOR]

to post a comment
JavaScript

8 Comments(s)

Copy linkTweet thisAlerts:
@KravvitzSep 12.2005 — Move the first 3 lines insdie the function.

You're not creating 400 <div> elements. You need to use createElement() or cloneNode() to do that.
Copy linkTweet thisAlerts:
@augustauthorSep 12.2005 — Sometimes when I've struggled with dhtml animations the mistake was to put timer and pixel-amount variables inside the function. As soon as I put them outside the function the animations worked. Ahh, I then figured that perhaps by always putting vars in the global space there won't be any more issues. But since JavaScript is one of the most confusing, messy comp. languages there is, I turned out to be wrong .

Why do I need to move the vars inside the function? Isn't it so that vars that are defined and declared in the global namespace will be available to All functions within a script? That's what they say in books. However, variable scopes and stuff like that seem to be higly arbitrary in JavaScript. Depending on the day of the week they work differently. I'd say even c, or c++'s gotta be more consistent than JavaScript.

But, hey thanks anyway, and I'd be glad if you could resolve this scope thing to me; Why do I need to put the vars within the function, while other times if you do that the program won't work? -Thanks.

? :mad:
Copy linkTweet thisAlerts:
@KravvitzSep 12.2005 — setTimeout() and setInterval() execute from the global scope, not from the scope of the function they are called from.

It's really not that complicated, once you learn the rules and exceptions.
Copy linkTweet thisAlerts:
@augustauthorSep 12.2005 — Thanks. What about moving the three variables inside the function? How come they're not visible within the function since globals normally are, right?

Also, you said this: "It's really not that complicated, once you learn the rules and exceptions."

Do you happen to know of any good lerning source for these rules and exceptions, such as a tutorial? To be sure, most books either don't mention iy or spend to little time explaining such important things that really haunt you later on.

Thanx for your help.
Copy linkTweet thisAlerts:
@KravvitzSep 12.2005 — Thanks. What about moving the three variables inside the function? How come they're not visible within the function since globals normally are, right?[/QUOTE]
You're welcome ?

Manipulating the DOM before the page finishes loading is buggy at best. You need to set those variables after the page has finished loading.

Do you happen to know of any good lerning source for these rules and exceptions, such as a tutorial? To be sure, most books either don't mention iy or spend to little time explaining such important things that really haunt you later on.[/QUOTE]
[url=http://www.oreilly.com/catalog/jscript4]JavaScript[color=inherit]:[/color] The Definitive Guide[/url] is a very good book for this.
Copy linkTweet thisAlerts:
@augustauthorSep 14.2005 — Already got that book. Indeed the most serious no-nonsense possibly on the market. Nevertheless, look up setTimeout() and setInterval and there's not much to warn you off such mistakes as I am making. There's a chapter on lexical scopes or so, but I'm not sure, either it was too boringly written so it didn't stick with me, or it wasn't mentioned anything about when or why, to put variables on point a as opposed to point b. You know, when it comes to very specific issues specific examples would help, and I think that book lack them in some areas. O well, a book can't cover everything. An online tutorial would be nice though. ?
Copy linkTweet thisAlerts:
@KravvitzSep 14.2005 — Read the second paragraph under description under window.setTimeout().

[url=http://www.dynamicsitesolutions.com/javascript/mistakes/]Take a look at this.[/url]
Copy linkTweet thisAlerts:
@augustauthorSep 16.2005 — [COLOR=Red]Thanks[/COLOR] Kravvitz
×

Success!

Help @august spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.4,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...