Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    May 2007
    Posts
    47
    Thanks
    5
    Thanked 1 Time in 1 Post

    Arrow Creating child elements

    I'm a true newbie when it comes to JavaScript. To learn the language, I've set up a project for myself, a sort of board game.

    As it is, I have a series of divs, each with an image (img tag). The divs ids are "Space1", "Space2", "Space3", etc. I am trying to dynamically create child divs inside the space divs as player markers. Here is the code:

    Code:
    <script type="text/javascript">
    	for(intA=0;intA<=10;intA++){
    		var NewDiv=document.createElement("div")
    		NewDiv.setAttribute("id","Space"+intA+"Player1")
    		NewDiv.style.width="20px";NewDiv.style.height="20px"
    		NewDiv.style.position="relative"
    		NewDiv.style.left="10px";NewDiv.style.top="10px"
    		NewDiv.innerHTML="1"
    		NewDiv.style.backgroundColor="#333333"
    		NewDiv.style.border="2px solid black"
    		NewDiv.style.visibility="visible"
    		NewDiv.style.zIndex="1000"
    		document.getElementById("Space"+intA).appendChild(NewDiv)		
    	}
    </script>
    The assumption is that this code should make a 20x20 gray box with a "1" in it. I've tried playing with the visibility and the z-index, but nothing is showing up. What am I doing wrong here?

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,980
    Thanks
    56
    Thanked 557 Times in 554 Posts
    [EDIT]oops - sorry, I think I just got what you were trying to do... you understand that the loop starts at 0, right? So if you do not have a div with ID "Space0" the code will fail on the first run. If that's the problem you can either make a "Space0" div or else start the loop from 1 like this:
    Code:
    for(intA=1;intA<=11;intA++){
    Last edited by xelawho; 01-14-2012 at 04:09 AM.

  • #3
    New Coder
    Join Date
    May 2007
    Posts
    47
    Thanks
    5
    Thanked 1 Time in 1 Post
    Quote Originally Posted by xelawho View Post
    I think your biggest problem was that you were trying to append the div to itself.
    Code:
    Mine: document.getElementById("Space"+intA).appendChild(NewDiv)
    Yours: document.body.appendChild(NewDiv)
    Won't your code attach the dynamically created div to the document/body, rather than the intended parent div ("SpaceX")?

    Can you explain how you mean I was trying to append the div to itself?

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,980
    Thanks
    56
    Thanked 557 Times in 554 Posts
    yes you are correct - please see my edited post above

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,980
    Thanks
    56
    Thanked 557 Times in 554 Posts
    and another thing I just noticed - the <= in the loop will only cause you grief. better to write it like this:

    Code:
    for(intA=1;intA<11;intA++){


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •