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 9 of 9
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    28
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Selecting a specific dynamically created div

    Hi. I've dynamically created some divs, how do I select a specific div to use?

    Code:
    //create box for length of letters in word
    		var i = 0;
    		for(i=0;i<wL;i++){		
    			cBoxes = document.createElement("div");
    				cBoxes.className = "letterBoxes";
    						hangMan.appendChild(cBoxes);
    				}
    So I'm creating the amount of divs equal to the amount of letters in my word (I'm making a hangman game).

    On correct guess, I need the letter to show in it's correct position (within the correct blank div previously created).

    I have the correct position stored in a variable (letPos), and the correct guess (userGuess), I need to show userGuess at the div equal to letPos, ie div 4 or div 5, etc.

    If I simply go cBoxes.innerHTML = userGuess, the correct userGuess always shows at the last position in my cBoxes divs. I need it to show at the correct position (letPos).

    Any hints?

  • #2
    Banned
    Join Date
    Mar 2012
    Posts
    306
    Thanks
    1
    Thanked 28 Times in 28 Posts
    Quote Originally Posted by pixo_newb View Post

    On correct guess, I need the letter to show in it's correct position (within the correct blank div previously created).

    Any hints?
    This is probably homework but hopfully this example will help you get started. I haven't included any input validation or code to record the number of incorrect guesses.

    This example just displays the correct letter in the correct box if the user makes a correct guess.

    Code:
            
            <style type="text/css">
                #lettersContainer{
                    overflow: hidden;
                    margin: 0px 0px 20px 0px;
                }
                .letterBoxes {
                    float: left;
                    margin: 0px 10px 0px 0px;
                    width: 2em;
                    height: 2em;
                    background-color: green;
                    text-align: center;
                    font-weight: bold;
                    font-size: 1.5em;
                    font-family: tahoma, arial, sans-serif;
                }
                #txtLetter{
                    clear: both;
                }
            </style>
    PHP Code:
        <body>
            <
    div id="lettersContainer"></div>
            <
    div>
                <
    input type="text" id="txtLetter" maxlength="1" />
                <
    button onclick="checkGuess();">Check guess</button>
            </
    div>
            
            <
    script>
                var 
    word 'HANGman';
                var 
    lettersContainerObj document.getElementById('lettersContainer');
                var 
    txtLetterObj document.getElementById('txtLetter');
                for(
    i=0i<word.lengthi++){
                    var 
    newDiv document.createElement('div');
                    
    newDiv.className 'letterBoxes';
                    
    lettersContainerObj.appendChild(newDiv);
                } 
                var 
    letterboxesObj document.getElementById('lettersContainer').getElementsByTagName('div');
                function 
    checkGuess(){
                    var 
    guess txtLetterObj.value.toLowerCase();
                    for(
    i=0i<word.lengthi++){
                        if(
    guess == word.charAt(i).toLowerCase()){
                            
    letterboxesObj[i].innerHTML guess.toUpperCase();
                        }
                    }
                    
    txtLetterObj.value '';
                    
    txtLetterObj.focus();
                }
                
            
    </script>

        </body> 
    Last edited by Mishu; 03-28-2012 at 11:19 AM.

  • Users who have thanked Mishu for this post:

    pixo_newb (03-28-2012)

  • #3
    New Coder
    Join Date
    Nov 2011
    Posts
    28
    Thanks
    13
    Thanked 0 Times in 0 Posts
    Thanks for that. I appreciate it.

    But it's not homework, I don't go to school.

    I just solved my problem beforehand, I hadn't assigned an ID to each div. I assumed assigning an ID was like assigning a classname, ie
    cBoxes.className =
    cBoxes.Id =

    But no. setAttribute.

    I know how to sort the rest of my game out, it's just this was the first time that I've incorporated dynamically created divs.

    Thanks again.

  • #4
    Banned
    Join Date
    Mar 2012
    Posts
    306
    Thanks
    1
    Thanked 28 Times in 28 Posts
    Quote Originally Posted by pixo_newb View Post
    I hadn't assigned an ID to each div.
    That's one way to do it but you don't necessarily need an id. In my example I assign a class to each dynamic div, but just for css purposes. My dynamic divs do not have an id.

    The counter i in
    Code:
                        if(guess == word.charAt(i).toLowerCase()){
                            letterboxesObj[i].innerHTML = guess.toUpperCase();
                        }
    designates the position of the correct guess and assigns the letter to the correct box (div).
    Last edited by Mishu; 03-28-2012 at 11:26 AM.

  • Users who have thanked Mishu for this post:

    pixo_newb (03-28-2012)

  • #5
    New Coder
    Join Date
    Nov 2011
    Posts
    28
    Thanks
    13
    Thanked 0 Times in 0 Posts
    Ye, I agree that's a better way to do it.

    Btw, If the word has more than 1 letter in it - do you know of a way to show up both letters?

    Ie if the word is YELLOW and the player guesses L,
    my game will show _ _ L _ _ _, omitting the second L.


    I remember playing about with something like this a while ago, and I used subString() to scan the word twice, once from the beginning and once from the end (if memory serves me correctly). This would only work if the word had two letters the same though.

    I'm guessing I'll have to split the string up and search in the remainder of the string for the letter once again?

    I don't know if that makes sense but I'll post my best attempts later on if I can't figure it out.

  • #6
    Banned
    Join Date
    Mar 2012
    Posts
    306
    Thanks
    1
    Thanked 28 Times in 28 Posts
    Quote Originally Posted by pixo_newb View Post

    Btw, If the word has more than 1 letter in it - do you know of a way to show up both letters?

    Ie if the word is YELLOW and the player guesses L,
    my game will show _ _ L _ _ _, omitting the second L.

    The for loop in the example I posted looks for all occurances of the guess.
    Code:
                    for(i=0; i<word.length; i++){
                               if(guess == word.charAt(i).toLowerCase()){
                                      letterboxesObj[i].innerHTML = guess.toUpperCase();
                               }
                    }
    I loop thru each letter in the word to see if it matches the guessed letter. If they match, then the i'th letterbox is assigned the guessed letter.

  • Users who have thanked Mishu for this post:

    pixo_newb (03-28-2012)

  • #7
    New Coder
    Join Date
    Nov 2011
    Posts
    28
    Thanks
    13
    Thanked 0 Times in 0 Posts
    Of course. Don't know how I missed that, I need a break.

    Thanks a lot for your help.

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,013
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Does not your code do that already?

    for (i=0; i<word.length; i++){
    if (guess == word.charAt(i).toLowerCase()){
    letterboxesObj[i].innerHTML = guess.toUpperCase();
    }
    }

    Too slow - already answered!

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #9
    Banned
    Join Date
    Mar 2012
    Posts
    306
    Thanks
    1
    Thanked 28 Times in 28 Posts
    Quote Originally Posted by pixo_newb View Post
    Thanks a lot for your help.
    happy to have helped


  •  

    Posting Permissions

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