Display label character by character using javascript

Question

Hi, I am creating Hang a Man using PHP, MySQL & Javascript. Every thing is going perfect, I get a word randomly from DB show it as a label apply it a class where display = none. Now when I click on a Character that character become disable fine which i actually want but the label-character does not show. My code is:

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<?php

    include( 'config.php' );

    $question = questions();    // Get question.
    $alpha = alphabats();       // Get alphabets.

?>
<script language="javascript">
    function clickMe( name ){

        var question = '<?php echo $question; ?>';
        var questionLen = <?php echo strlen($question); ?>;

        for ( var i = 0; i < questionLen; i++ ){
            if ( question[i] == name ){

                var link = document.getElementById( name );
                link.style.display = 'none';

                var label = document.getElementById( 'questionLabel' + i );
                label.style.display = 'block';

            }
        }
    }
</script>
<div>
<table align="center" style="border:solid 1px">
    <tr>
        <?php
            for ( $i = 0; $i < 26; $i++ ) {
                echo "<td><a href='#' id=$alpha[$i] name=$alpha[$i] onclick=clickMe('$alpha[$i]');>". $alpha[$i] ."</a>&nbsp;</td>";            
            }
        ?>
    </tr>
</table>
<br/>
<table align="center" style="border:solid 1px">
    <tr>
        <?php
            for ( $i = 0; $i < strlen($question); $i++ ) {
                echo "<td class='question'><label id=questionLabel$i >". $question[$i] ."</label></td>";            
            }
        ?>
    </tr>
</table>
</div>

Answer 1

First of all, why would it show, when you're setting its display to none?

Second, you probably want to take the hiding of the letter outside the if - if you don't, you'll be hiding the letter several times over if it appears couple of times in the question (think "banana" - if you pick "a", it will hide "a" three times) - which is not an issue, and won't hide the letter if it does not appear in the question - which probably is.

Third - Why are you using labels? You can, it's not illegal or anything, but they have a clear purpose - to mark text belonging to checkboxes and other selectable elements that don't have text of their own. It is best to use elements according to their intended meaning. As there is no HTML element dedicated to single letters in a hangman game, you're best off with span or div.

UPDATE: Try this; I'm not sure, but reasonably convinced that this is what you want:

    for ( var i = 0; i < questionLen; i++ ){
        var link = document.getElementById( name );
        link.style.display = 'none';

        if ( question[i] == name ){

            var label = document.getElementById( 'questionLabel' + i );
            label.style.display = 'inline';

        }
    }

Answer 2

Have you tried label.style.display = ''; instead of 'block'?

Answer 3

$question seems to have been mis used...

on this lines:

for ( $i = 0; $i < strlen($question); $i++ ) {
 echo "<td class='question'><label id=questionLabel$i >". $question[$i] ."</label></td>";            
}

you say strlen which is the number of characters in a string. or aka string length. and then you say "....$question[$i]...." which is a non array ...

so....

replace "strlen" with "count" and then use str_split on $questions.

so you end up with ...

$question = str_split($question);
for ( $i = 0; $i < count($question); $i++ ) {
   echo "<td class='question'><label id=questionLabel$i >". $question[$i] ."</label></td>";            
}

this would split each character which is what i think you are trying to do.

Answer 4

The problem (as Amadan pointed out) is that you're setting the display to none for the label (looks like you might have copy-pasted):

            var link = document.getElementById( name );
            link.style.display = 'none';

            var label = document.getElementById( 'questionLabel' + i );
            label.style.display = 'inline'; 

Also, you might consider refactoring to use a regular expression instead of looping through the string:

function clickMe(name) {

    // Get the question string
    var question = '<?php echo $question; ?>',

    // Create a RegExp based on the name
        re = new RegExp(name, "gi"),

    // Get a handle to the link   
        link = document.getElementById(name),

    // Set up our `match` variable
        match;

    // Set the link display to "none" outside of the loop
    link.style.display = "none";

    // For each match found in the question, show that label. 
    while(match = re.exec(question))
        document.getElementById("questionLabel"+match.index)
          .style.display = "inline";
}

Your function compresses down to only 7 lines of code this way, making it easier to read and a little smarter than looping through each character of the question.