CODEWITHSUNDEEP
javascripthtml
azure
azure

Reputation: 1

hangman game.I got the logic down but i cant seem to make it work...Any pointer on what i am missing or doing wrong?

I am making a hangman game with only javascript and HTML. I seem to get the logic down but as you can see I can't seem to make it start and work overall. Any pointers on what I did wrong and missing. Any assistance is greatly appreciated.

<script>
var keywords=["Apple","Banana","Variety"];
var score=0, fails=0, actualword="", guessword;
    
function startGame()
    {
        
        var num = Math.floor(keywords);
        actualword = keywords[num];
        actualword = actualword.toUpperCase();
        
        for ( i = 0; i < actualword.length; i++)
    {
        guessword += "*";
    }
        document.getElementById("hangman").value = guessword;
        document.getElementById("msg").value = "A word has already been selected, click button below to play game.";
        document.getElementById("score").value = score;
        document.getElementById("fails").value = fails;
    }
    function find(x)
    {
        var found = false;
        for ( i =0; i < actualword.length; i++)
            {
                if(actualword.charAt(i) == x)
                    {
                        guessword = setCharAt(guessword, i, x);
                        found=true;
                    }
            }
        if(found)
            {
                if( guessword == actualword)
                    {
                        alert("Well done!");
                        score++;
                        document.getElementById("msg").value = "Click 'Start' button to select the next keyword";
                        
                    }
            }
        document.getElementById("hangman").value = guessword;
        document.getElementById("score").value =  score;
        document.getElementById("fails").value = fails;
    }
    
    function setCharAt(str,index,chr)
    {
        return str.substr(0,index) + chr + str.substr(index+1);
    }
</script>  
<!doctype html>
<html>
<head>
<title>HangMan Game - Javascript</title>
</head>
<body>
<form name="f">

<table bgcolor="#C0C0C0" border="1">
 <tbody><tr>
  <td colspan="4" align="right">
   Score : <input type="text" name="score" value="0" size="2">
   <br>
   Fails (6): <input type="text" name="fails" value="0"size="2">  
  </td>
  <td colspan="7" align="CENTER">
   <input type="text" name="hangman" value="    --- Hangman ---" size="25"> 
    <br>
   <input type="text" name="msg" value="Click GO to get a word." size="25">  
  </td>
  <td colspan="2" align="center">
   <input type="button" onclick="startGame()" value=" START ">   
  </td>
 </tr>
 <tr>
  <td><input type="BUTTON" value=" A " onclick="find('A');"></td>
  <td><input type="BUTTON" value=" B " onclick="find('B');"></td>
  <td><input type="BUTTON" value=" C " onclick="find('C');"></td>
  <td><input type="BUTTON" value=" D " onclick="find('D');"></td>
  <td><input type="BUTTON" value=" E " onclick="find('E');"></td>
  <td><input type="BUTTON" value=" F " onclick="find('F');"></td>
  <td><input type="BUTTON" value=" G " onclick="find('G');"></td>
  <td><input type="BUTTON" value=" H " onclick="find('H');"></td>
  <td><input type="BUTTON" value=" I   " onclick="find('I');"></td>
  <td><input type="BUTTON" value=" J  " onclick="find('J');"></td>
  <td><input type="BUTTON" value=" K " onclick="find('K');"></td>
  <td><input type="BUTTON" value=" L  " onclick="find('L');"></td>
  <td><input type="BUTTON" value=" M " onclick="find('M');"></td>
 </tr>
 <tr>
  <td><input type="BUTTON" value=" N " onclick="find('N');"></td>
  <td><input type="BUTTON" value=" O " onclick="find('O');"></td>
  <td><input type="BUTTON" value=" P " onclick="find('P');"></td>
  <td><input type="BUTTON" value=" Q " onclick="find('Q');"></td>
  <td><input type="BUTTON" value=" R " onclick="find('R');"></td>
  <td><input type="BUTTON" value=" S " onclick="find('S');"></td>
  <td><input type="BUTTON" value=" T " onclick="find('T');"></td>
  <td><input type="BUTTON" value=" U " onclick="find('U');"></td>
  <td><input type="BUTTON" value=" V " onclick="find('V');"></td>
  <td><input type="BUTTON" value=" W " onclick="find('W');"></td>
  <td><input type="BUTTON" value=" X  " onclick="find('X');"></td>
  <td><input type="BUTTON" value=" Y " onclick="find('Y');"></td>
  <td><input type="BUTTON" value=" Z  " onclick="find('Z');"></td>
 </tr>
</tbody>
</table>
</form>
</body>
</html>

Upvotes: 0

Views: 59

Answers (1)

shubham
shubham

Reputation: 1319

The issue is with these lines of code.

var num = Math.floor(keywords);
actualword = keywords[num];
actualword = actualword.toUpperCase();

keywords is an array var keywords=["Apple","Banana","Variety"];.

Math.floor(keywords); // this will return NaN

So this will become:

var num = Math.floor(keywords); // NaN
actualword = keywords[num]; // keywords[NaN], which will be undefined
actualword = actualword.toUpperCase(); // undefined.toUpperCase(); this will cause an error.

Cannot read property 'toUpperCase' of undefined

Upvotes: 3

Related Questions