PDA

View Full Version : New at JS - why isn't this simple code working???

ShootingBlanks
05-14-2010, 03:47 PM
Hello - here's the code I have:

for(i=1; i<=5; i++) {
var divTag = document.createElement("div");
divTag.id = "SelectDiv"+i;
document.body.appendChild(divTag);
}

All I want to do is before the closing </body> tag have five different empty divs created that would look like this:

<div id="SelectDiv1"></div>
<div id="SelectDiv2"></div>
<div id="SelectDiv3"></div>
<div id="SelectDiv4"></div>
<div id="SelectDiv5"></div>

Any help? Thanks!
Rowsdower!
05-14-2010, 07:54 PM
Hello - here's the code I have:

for(i=1; i<=5; i++) {
var divTag = document.createElement("div");
divTag.id = "SelectDiv"+i;
document.body.appendChild(divTag);
}

All I want to do is before the closing </body> tag have five different empty divs created that would look like this:

<div id="SelectDiv1"></div>
<div id="SelectDiv2"></div>
<div id="SelectDiv3"></div>
<div id="SelectDiv4"></div>
<div id="SelectDiv5"></div>

Any help? Thanks!

The body doesn't exist yet when the javascript is trying to run. You would need to delay the execution of the script until after the body tag has been created.

Here's one possibility:
function create_divs(){
for(i=1; i<=5; i++) {
var divTag = document.createElement("div");
divTag.id = "SelectDiv"+i;
document.body.appendChild(divTag);
}
}
setTimeout("create_divs()",50);

There is probably a much cleaner way to do this, but in a pinch this works.
ShootingBlanks
05-14-2010, 08:55 PM
The body doesn't exist yet when the javascript is trying to run.
But I put that code after the first <body> tag. Wouldn't that mean the body would've been created? Or no?

I also tried adding the code you suggested (with the function) to the body, and that didn't seem to work either.

Any other thoughts???
coothead
05-14-2010, 09:12 PM
Hi there ShootingBlanks,

try it like this...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>dynamic divs</title>

<style type="text/css">
#SelectDiv1,#SelectDiv2,#SelectDiv3,
#SelectDiv4,#SelectDiv5 {
width:160px;
height:98px;
border:1px solid #333;
margin:4px;
background-color:#ccc;
}
</style>

<script type="text/javascript">

function init(){
for(i=1;i<=5;i++) {
divTag=document.createElement("div");
divTag.setAttribute('id','SelectDiv'+i);
document.body.appendChild(divTag);
}
}
if(window.addEventListener){
window.addEventListener('load',init,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',init);
}
}
</script>

</head>
<body>

<div>
</div>

</body>
</html>

coothead
ShootingBlanks
05-14-2010, 09:23 PM
Ahhhh, yes - I'm a dope.

Adding those styles to the divs made me realize that they were actually there the entire time (even with my code in my initial post). The problem was that I was expecting to see something like "<div id='SelectDiv1'></div>" when I viewed the source code of the page.

I didn't know it wouldn't show up there! :o
coothead
05-14-2010, 09:29 PM
Hi there ShootingBlanks,

I use the Firefox Web Developer 1.8.1 add on.

Clicking the "View Source" tab reaveals a "View Generated Source" option.

Problem solved. ;)

coothead