I'm not very good in coding and I'm having a few problems with my Hangman Game

StackOverflow https://stackoverflow.com/questions/22582803

  •  19-06-2023
  •  | 
  •  

Question

I am just beginning to learn how to use javascript and I'm having a few issues with my code. We are asked to make a hangman game and I have developed the necessary code to make the "right" letter and "wrong" letter loops work. However, I need my code to display asterisk symbols not boxes that the letters go in. I also need it to congratulate the user when they have guessed the word correctly. I am assuming the easiest thing to do would be to have it "alert" the user. This part isn't required but I would also like to know how to add the "hangman" images to the code. So say the user guesses a wrong letter, it would then build the hangman from the images.

I know I'm asking a lot but the asterisks part instead of boxes and the alert is what I'm really looking for. Any help would be appreciated.

This is my html code to go with my javascript code

<html>
<head>
<title>HangmanProgram</title>    
</head>
    <script src="functions.js"></script>
<body>
<H1><bold><center> Hangman Program</h1>
<h3> The Hangman Game.
<br>     
Click Start Game button. Type a letter in the "Guess" box and then click "Guess". 
<br> 
Click Reset button to play again.
<br>
<br>

<Form name = "hangmanForm">
<input type="button" value="Start Game" onclick="getword()"><br>
<!-- Hidden field for storing answer -->
<input type="hidden" name="answer" value=""/> 
<input type="button" value="Guess" onclick="formCheck()">
<input name = "ltr" type="text" size = "1"><br>

<br>The Word is:
<input name = "letterone" type="text" size = "1">
<input name = "lettertwo" type="text" size = "1">
<input name = "letterthree" type="text" size = "1">
<input name = "letterfour" type="text" size = "1">
<BR>
<BR>
Wrong Letters<input name = "wrongletters" type="text" size = "24">
<BR>
<BR>
<input type="reset" value="Reset">
</form>
</head>
</body>
</html>

below is my javascript code

// Get a random number
function get_random()
{
  document.hangmanform.ltr.focus();
    var ranword= Math.floor(Math.random()*11);
    return ranword;
    }

    // Fetch the possible words using random number and array of choices
function getword()
    {
        var userguess=get_random();

    var words =new Array(11);
        words[0]="note";
        words[1]="duck";
        words[2]="cake";
        words[3]="lake";
        words[4]="stop";
        words[5]="know";
        words[6]="dogs";
        words[7]="play";
        words[8]="fair";
        words[9]="sexy";
        words[10]="love";

        var answer = words[userguess];

        // Set hidden field to answer.
        hangmanform.answer.value = answer;

    }

    function formCheck()
    {
    // Read answer and decide if guess is in the string.
        var answer = hangmanform.answer.value;
        var vposition = answer.indexOf(hangmanform.ltr.value);

    // If it is not the word, add to wrong letters box.
        if (vposition == -1) {
            hangmanform.wrongletters.value = hangmanform.ltr.value + " " + hangmanform.wrongletters.value;
        }
        else {

            // Guess in string
            switch (vposition) {
                case 0:
                hangmanform.letterone.value = answer.substring(0,1);
                break;
                case 1:
                hangmanform.lettertwo.value = answer.substring(1,2);
                break;
                case 2:
                hangmanform.letterthree.value = answer.substring(2,3);
                break;
                case 3:
                hangmanform.letterfour.value = answer.substring(3,4);
            }

        }

        // Set form guess box to empty string NOT SPACE
        hangmanform.ltr.value ="";
        hangmanform.ltr.focus();
    }
Was it helpful?

Solution

JavaScript is case-sensitive. So, name, Name, and NAME are considered different identifiers that can be used at the same time for different values.

In this case, it means that each of the references to hangmanform (lowercase) in the script should be hangmanForm (camelCase) to match the case used by <form name="hangmanForm">.

// ...

function formCheck()
{
// Read answer and decide if guess is in the string.
    var answer = hangmanForm.answer.value;
    var vposition = answer.indexOf(hangmanForm.ltr.value);

// ...

Also, though automatic globals are becoming standard, it's still not necessarily a good practice to depend on them as they can still collide with other uses of global variables.

// ...

function formCheck()
{
// Read answer and decide if guess is in the string.
    var form = document.getElementsByName('hangmanForm')[0];
    var answer = form.answer.value;
    var vposition = answer.indexOf(form.ltr.value);

// ...

MDN: getElementsByName()

OTHER TIPS

A <span> can be <span id="letters">* * * *</span> and can be addressed with:

var letters = document.getElementById('letters'),
    chars = letters.textContent.split(' ');
chars[2] = 'X'; // change the third * to the letter X
letters.textContent = chars.join(' ');
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top