...

View Full Version : Selecting a specific dynamically created div



pixo_newb
03-28-2012, 11:04 AM
Hi. I've dynamically created some divs, how do I select a specific div to use?



//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?

Mishu
03-28-2012, 11:56 AM
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.



<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>


<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=0; i<word.length; i++){
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=0; i<word.length; i++){
if(guess == word.charAt(i).toLowerCase()){
letterboxesObj[i].innerHTML = guess.toUpperCase();
}
}
txtLetterObj.value = '';
txtLetterObj.focus();
}

</script>

</body>

pixo_newb
03-28-2012, 12:14 PM
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:rolleyes:. 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.

Mishu
03-28-2012, 12:23 PM
I hadn't assigned an ID to each div:rolleyes:.

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


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).

pixo_newb
03-28-2012, 12:36 PM
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.

Mishu
03-28-2012, 12:58 PM
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.


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.

pixo_newb
03-28-2012, 01:01 PM
Of course. Don't know how I missed that, I need a break.

Thanks a lot for your help.

Philip M
03-28-2012, 01:02 PM
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! :)

Mishu
03-28-2012, 01:02 PM
Thanks a lot for your help.
happy to have helped :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum