2015-12-10 40 views
0

破折號似乎不代表單詞中的字母。當點擊播放按鈕激活啓動功能時,它們應該啓動。Hang子手遊戲。爲什麼破折號不會顯示?

<html> 
<head> 
<img src="images/hangman_large.png" style="width:200px;height:200px;"> 
<h1>Hangman</h1> 
<h3>theStatus</h3> 
<h4>theDashes</h4> 

<SCRIPT LANGUAGE="JavaScript"> 

var guessInt = 6; 
var guessStr = "You have " + guessInt + " tries left"; 

    // Randomly select a word from the Array 
    function getWord() 
    { 
     var words = new Array("Number","Goblin","Prestidigitation","Invigorating","Radio", 
    "Bromine","Bosnia","Catastrophe","Manic","Marble", 
    "Granite","Georgia","Forlorn","Monster","Blasphemy"); 

    var index = Math.floor(Math.random() * words.length); 
    return words[index]; 
    } 

    // Given a string, "word", return a hidden version of it consisting of dashes for the display.  
    function getDisplay(word) 
    { 
     var display = ""; 

    for (var i=0; i < word.length; i++) 
    { 
     display = display + "-"; 
    } 

    return display; 
    } 

      // word is an object and search is a default function part of object word 
    // Given the word "word", check if it contains the letter "letter". 
    // FIND IF THE LETTER IS IN THE WORD 
    function isLetterInWord(word, letter) 
    {  

      /* Write an if conditional to check if the variable word is null OR 
     the value of guessInt equals 0 */ 
    if (word === null || guessInt === 0) 
    { 
     return;// Return program control with a return statement 
    } 
    else 
    { 
     /* Write an if conditional that calls the search function on variable word 
      passing variable letter as an argument and use the logical compound not 
      operator and equality (!=) to compare the result to -1, -1 indicates that 
      it doesn't exist */ 
     if(word.search(letter) != -1) 
     { 
      setLetter(word, letter, document.getElementById("theDashes").innerHTML); 
      // Call function setLetter(word, letter, document.getElementById("theDashes").innerHTML); 
     } 
     else 
     { 
      // letter was not in the word so decrease the number of tries left and update the display 
      guessInt--;// Decrement global variable guessInt by 1 
      guessStr="You have " + guessInt + " tries left"; 
      // Update global variable guessStr based in the updated value of guessInt 
      document.getElementById("guesses").innerHTML = guessStr; 
      // Update element id "guesses" to the updated guessStr 
     } 
     isFinished(word, document.getElementById("theDashes").innerHTML, guessInt); 
     // Call function isFinished(word, document.getElementById("theDashes").innerHTML, guessInt); 
     } 
    } 

    //UPDATE GAME DISPLAY IF WE'VE BEEN GIVEN A MATCHING LETTER 
    // This method is called by the Hangman program when your isLetterInWord function above returns true. 
    // The parameters passed in are the guessed letter, the secret word, and the current display state of the secret word. 
    // This method will return a new display state of the secret word based on the matching letter. 

    function setLetter(word, letter, display) 
    { 
     /* Write an if conditional to check if the variable word is null OR 
      the value of guessInt equals 0 */ 
     if(word === null || guessInt === 0) 
    { 
     return;// Return program control with a return statement 
    } 
    else 
    { 
     /* Write a repetition statement that calls the search function on variable word 
      passing variable letter as an argument and use the logical compound not operator 
      and equality (!=) to compare the result to -1 */ 
     while(word.search(letter) != -1) 
     { 
      // Create variable index and set it equal to the search function call on variable 
      // word passing variable letter 
      var index = word.search(letter); 
      display = display.substr(0, index) + letter + display.substr(index + 1); 
      word = word.substr(0, index) + '-' + word.substr(index + 1); 
     } 

     display = index;// Update the display 
     document.getElementById("theDashes").innerHTML = display; 
      // Update element id "theDashes" to the updated display variable 
     } 
    } 

    // This method is called each time you guess a letter. Its job is to determine whether you have have won the game, lost the game, 
    // or if the game should continue. 

    // The input parameters passed are the secret word (word), the current word display (display), and the number of chances left (left) 
    // to reveal the secret word. 

    function isFinished(word, display, left) 
    { 
     // Write a conditional statement checking to see if the value of left is greater than 0 
     if(left > 0) 
    { 
     // Write a conditional statement checking to see word is equal to display 
     if(word == display) 
     { 
      document.getElementById("theStatus").innerHTML = "Congratulations! You won!";// Update element id "theStatus" and set it equal to "Congratulations! You won!" 
     } 
    } 
    else 
    { 
     /* Update element id "theStatus" and set it equal to "HANGMAN! Your man has been hanged! --> 
      The word was and concatenate the variable word */ 
      document.getElementById("theStatus").innerHTML = "HANGMAN! Your man has been hanged!"; 
    } 
     } 
    } 

    // This is the main function that runs the program 
    **function start() 
    { 
     // TODO reset variable guessInt set equal to 6 
     guessInt = 6; 
    // reset guessStr 
    guessStr = "You have " + guessInt + " tries left"; 
    // create a variable called word set equal to function call getWord() 
    var word = getWord(); 
    // create a variable called display set equal to function call getDisplay() passing variable word as an argument 
    var display = getDisplay(word); 
    // update HTML object id "guesses" so it equals variable guessStr 
    document.getElementById("guesses").innerHTML = guessStr; 
    // update HTML object id "theWord" so it equals variable word 
    document.getElementById("theWord").innerHTML = word;  
    // update HTML object id "theDashes" so it equals variable display 
    document.getElementById("theDashes").innerHTML = display; 
    // update HTML object id "theStatus" so it is empty for a new game 
    document.getElementById("theStatus").innerHTML = "";  
    }** 

    </script> 
</head> 
<body> 
<script type="text/javascript"> 
</script> 

<body style="background-color:green"> 
<FORM NAME="game"> 
<PRE> 
<TEXTAREA NAME="status" ROWS="7" COLS="16" 
ONFOCUS="stayAway()"></TEXTAREA> 
</PRE><P> 
<INPUT TYPE="TEXT" NAME="toGuess" 
ONFOCUS="stayAway()"> <h1> theWord</h1><BR> 
<INPUT TYPE="TEXT" NAME="guessed" 
ONFOCUS="stayAway()"> <h2>guesses<h2><BR> 
<table border="1" style="width:100%"> 
    <tr> 
     <td><input name="Char" type="button" value="A" id="A" class="letter" onclick="isLetterInWord('A')"/></td> 
     <td><input name="Char" type="button" value="B" id="B" class="letter" onclick="isLetterInWord('B')"/></td> 
     <td><input name="Char" type="button" value="C" id="C" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'C')"/></td> 
     <td><input name="Char" type="button" value="D" id="D" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'D')"/></td> 
     <td><input name="Char" type="button" value="E" id="E" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'E')"/></td> 
     <td><input name="Char" type="button" value="F" id="F" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'F')"/></td> 
     <td><input name="Char" type="button" value="G" id="G" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'G')"/></td> 
    </tr> 
    <tr> 
     <td><input name="Char" type="button" value="H" id="H" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'H')"/></td> 
     <td><input name="Char" type="button" value="I" id="I" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'I')"/></td> 
     <td><input name="Char" type="button" value="J" id="J" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'J')"/></td> 
     <td><input name="Char" type="button" value="K" id="K" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'K')"/></td> 
     <td><input name="Char" type="button" value="L" id="L" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'L')"/></td> 
     <td><input name="Char" type="button" value="M" id="M" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'M')"/></td> 
     <td><input name="Char" type="button" value="N" id="N" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'N')" /></td> 
    </tr> 
    <tr> 
     <td><input name="Char" type="button" value="O" id="O" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'O')"/></td> 
     <td><input name="Char" type="button" value="P" id="P" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'P')"/></td> 
     <td><input name="Char" type="button" value="Q" id="Q" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'Q')"/></td> 
     <td><input name="Char" type="button" value="R" id="R" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'R')"/></td> 
     <td><input name="Char" type="button" value="S" id="S" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'S')"/></td> 
     <td><input name="Char" type="button" value="T" id="T" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'T')"/></td> 
     <td><input name="Char" type="button" value="U" id="U" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'U')"/></td> 
    </tr> 
    <tr> 
     <td><input name="Char" type="button" value="V" id="V" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'V')"/></td> 
     <td><input name="Char" type="button" value="W" id="W" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'W')"/></td> 
     <td><input name="Char" type="button" value="X" id="X" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'X')"/></td> 
     <td><input name="Char" type="button" value="Y" id="Y" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'Y')"/></td> 
     <td><input name="Char" type="button" value="Z" id="Z" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'Z')"/></td> 
    </tr> 
</table> 

    <input type="submit" style="width:150;height:50" value="Play" id="play" class="restart" onclick="start()"/> 
</div> 
<div style="width:400px;float:left;"> 
    <h2>Let's Play!</h2> 
<div style="width:200px;height:200px;float:left;"> 
<h3 id="guesses"></h3> 
<h2 id="theDashes"></h2> 
<!-- Update <h2 id="theWord"> with attribute hidden="true" so the selected word is not displayed -->   
<h2 id="theWord" hidden="true"></h2> 
<h3 id="theStatus"></h3> 
<br/> 
</div> 
</body> 
</html>  
+0

我看到了'body'元素兩個開放標籤和標籤你的身體標記,不能在那裏(IMG等),一個空的腳本標籤之外,並在captial不一致和小寫標籤 –

回答

0

你的代碼有很多問題。我把它清理得足以讓破折號顯示出來。黑色破折號在綠色背景上顯示不出來,但他們在那裏。

<!DOCTYPE html> 
<html> 
<head> 

    <SCRIPT LANGUAGE="JavaScript"> 

     var guessInt = 6; 
     var guessStr = "You have " + guessInt + " tries left"; 

     // Randomly select a word from the Array 
     function getWord() 
     { 
      var words = new Array("Number","Goblin","Prestidigitation","Invigorating","Radio", 
     "Bromine","Bosnia","Catastrophe","Manic","Marble", 
     "Granite","Georgia","Forlorn","Monster","Blasphemy"); 

      var index = Math.floor(Math.random() * words.length); 
      return words[index]; 
     } 

     // Given a string, "word", return a hidden version of it consisting of dashes for the display. 
     function getDisplay(word) 
     { 
      var display = ""; 

      for (var i=0; i < word.length; i++) 
      { 
       display = display + "-"; 
      } 

      return display; 
     } 

     // word is an object and search is a default function part of object word 
     // Given the word "word", check if it contains the letter "letter". 
     // FIND IF THE LETTER IS IN THE WORD 
     function isLetterInWord(word, letter) 
     { 

      /* Write an if conditional to check if the variable word is null OR 
     the value of guessInt equals 0 */ 
      if (word === null || guessInt === 0) 
      { 
       return;// Return program control with a return statement 
      } 
      else 
      { 
       /* Write an if conditional that calls the search function on variable word 
        passing variable letter as an argument and use the logical compound not 
        operator and equality (!=) to compare the result to -1, -1 indicates that 
        it doesn't exist */ 
       if(word.search(letter) != -1) 
       { 
        setLetter(word, letter, document.getElementById("theDashes").innerHTML); 
        // Call function setLetter(word, letter, document.getElementById("theDashes").innerHTML); 
       } 
       else 
       { 
        // letter was not in the word so decrease the number of tries left and update the display 
        guessInt--;// Decrement global variable guessInt by 1 
        guessStr="You have " + guessInt + " tries left"; 
        // Update global variable guessStr based in the updated value of guessInt 
        document.getElementById("guesses").innerHTML = guessStr; 
        // Update element id "guesses" to the updated guessStr 
       } 
       isFinished(word, document.getElementById("theDashes").innerHTML, guessInt); 
       // Call function isFinished(word, document.getElementById("theDashes").innerHTML, guessInt); 
      } 
     } 

     //UPDATE GAME DISPLAY IF WE'VE BEEN GIVEN A MATCHING LETTER 
     // This method is called by the Hangman program when your isLetterInWord function above returns true. 
     // The parameters passed in are the guessed letter, the secret word, and the current display state of the secret word. 
     // This method will return a new display state of the secret word based on the matching letter. 

     function setLetter(word, letter, display) 
     { 
      /* Write an if conditional to check if the variable word is null OR 
       the value of guessInt equals 0 */ 
      if(word === null || guessInt === 0) 
      { 
       return;// Return program control with a return statement 
      } 
      else 
      { 
       /* Write a repetition statement that calls the search function on variable word 
        passing variable letter as an argument and use the logical compound not operator 
        and equality (!=) to compare the result to -1 */ 
       while(word.search(letter) != -1) 
       { 
        // Create variable index and set it equal to the search function call on variable 
        // word passing variable letter 
        var index = word.search(letter); 
        display = display.substr(0, index) + letter + display.substr(index + 1); 
        word = word.substr(0, index) + '-' + word.substr(index + 1); 
       } 

       display = index;// Update the display 
       document.getElementById("theDashes").innerHTML = display; 
       // Update element id "theDashes" to the updated display variable 
      } 
     } 

     // This method is called each time you guess a letter. Its job is to determine whether you have have won the game, lost the game, 
     // or if the game should continue. 

     // The input parameters passed are the secret word (word), the current word display (display), and the number of chances left (left) 
     // to reveal the secret word. 

     function isFinished(word, display, left) 
     { 
      // Write a conditional statement checking to see if the value of left is greater than 0 
      if(left > 0) 
      { 
       // Write a conditional statement checking to see word is equal to display 
       if(word == display) 
       { 
        document.getElementById("theStatus").innerHTML = "Congratulations! You won!";// Update element id "theStatus" and set it equal to "Congratulations! You won!" 
       } 
      } 
      else 
      { 
       /* Update element id "theStatus" and set it equal to "HANGMAN! Your man has been hanged! --> 
        The word was and concatenate the variable word */ 
       document.getElementById("theStatus").innerHTML = "HANGMAN! Your man has been hanged!"; 
      } 
     } 


     // This is the main function that runs the program 
     function start() 
     { 
      // TODO reset variable guessInt set equal to 6 
      guessInt = 6; 
      // reset guessStr 
      guessStr = "You have " + guessInt + " tries left"; 
      // create a variable called word set equal to function call getWord() 
      var word = getWord(); 
      // create a variable called display set equal to function call getDisplay() passing variable word as an argument 
      var display = getDisplay(word); 
      // update HTML object id "guesses" so it equals variable guessStr 
      document.getElementById("guesses").innerHTML = guessStr; 
      // update HTML object id "theWord" so it equals variable word 
      document.getElementById("theWord").innerHTML = word; 
      // update HTML object id "theDashes" so it equals variable display 
      document.getElementById("theDashes").innerHTML = display; 
      // update HTML object id "theStatus" so it is empty for a new game 
      document.getElementById("theStatus").innerHTML = ""; 
     } 

    </SCRIPT> 
</head> 



    <body style="background-color:green"> 

<PRE> 
<TEXTAREA NAME="status" ROWS="7" COLS="16" 
      ONFOCUS="stayAway()"></TEXTAREA> 
</PRE><P> 
       <INPUT TYPE="TEXT" NAME="toGuess" 
         ONFOCUS="stayAway()"> <h1> theWord</h1><BR> 
       <INPUT TYPE="TEXT" NAME="guessed" 
         ONFOCUS="stayAway()"> <h2> 
        guesses 
       </h2> 
       <BR> 
       <table border="1" style="width:100%"> 
        <tr> 
         <td><input name="Char" type="button" value="A" id="A" class="letter" onclick="isLetterInWord('A')" /></td> 
         <td><input name="Char" type="button" value="B" id="B" class="letter" onclick="isLetterInWord('B')" /></td> 
         <td><input name="Char" type="button" value="C" id="C" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'C')" /></td> 
         <td><input name="Char" type="button" value="D" id="D" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'D')" /></td> 
         <td><input name="Char" type="button" value="E" id="E" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'E')" /></td> 
         <td><input name="Char" type="button" value="F" id="F" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'F')" /></td> 
         <td><input name="Char" type="button" value="G" id="G" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'G')" /></td> 
        </tr> 
        <tr> 
         <td><input name="Char" type="button" value="H" id="H" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'H')" /></td> 
         <td><input name="Char" type="button" value="I" id="I" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'I')" /></td> 
         <td><input name="Char" type="button" value="J" id="J" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'J')" /></td> 
         <td><input name="Char" type="button" value="K" id="K" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'K')" /></td> 
         <td><input name="Char" type="button" value="L" id="L" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'L')" /></td> 
         <td><input name="Char" type="button" value="M" id="M" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'M')" /></td> 
         <td><input name="Char" type="button" value="N" id="N" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'N')" /></td> 
        </tr> 
        <tr> 
         <td><input name="Char" type="button" value="O" id="O" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'O')" /></td> 
         <td><input name="Char" type="button" value="P" id="P" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'P')" /></td> 
         <td><input name="Char" type="button" value="Q" id="Q" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'Q')" /></td> 
         <td><input name="Char" type="button" value="R" id="R" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'R')" /></td> 
         <td><input name="Char" type="button" value="S" id="S" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'S')" /></td> 
         <td><input name="Char" type="button" value="T" id="T" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'T')" /></td> 
         <td><input name="Char" type="button" value="U" id="U" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'U')" /></td> 
        </tr> 
        <tr> 
         <td><input name="Char" type="button" value="V" id="V" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'V')" /></td> 
         <td><input name="Char" type="button" value="W" id="W" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'W')" /></td> 
         <td><input name="Char" type="button" value="X" id="X" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'X')" /></td> 
         <td><input name="Char" type="button" value="Y" id="Y" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'Y')" /></td> 
         <td><input name="Char" type="button" value="Z" id="Z" class="letter" onclick="isLetterInWord(document.getElementById('theWord').innerHTML, 'Z')" /></td> 
        </tr> 
       </table> 

       <input type="button" style="width:150;height:50" value="Play" id="play" class="restart" onclick="start()" /> 

       <div style="width:400px;float:left;"> 
        <h2>Let's Play!</h2> 
        <div style="width:200px;height:200px;float:left;"> 
         <h3 id="guesses"></h3> 
         <h2 id="theDashes"></h2> 
         <!-- Update <h2 id="theWord"> with attribute hidden="true" so the selected word is not displayed --> 
         <h2 id="theWord" hidden="true"></h2> 
         <h3 id="theStatus"></h3> 
         <br /> 
        </div> 
       </div> 

    </body> 
</html>