使用javascript在刽子手游戏中出现错误代码_Javascript

使用javascript在刽子手游戏中出现错误代码

javascript

使用javascript在刽子手游戏中出现错误代码,javascript,Javascript,我正试图用JS完成一项绞刑任务。我试图完成processGuessevent函数，这样我就可以在控制台上运行该程序，并在剩下的代码中识别任何错误。当我运行游戏时，我会输入一个单词让其他玩家猜，但当我猜到一个字母时，控制台上会出现一个错误： script.js:63未捕获类型错误：无法读取的属性“toUpperCase” 在HTMLElement.processGuess script.js中未定义：63 我不知道为什么会这样。错误引用的行是： document.getElementById("

我正试图用JS完成一项绞刑任务。我试图完成processGuessevent函数，这样我就可以在控制台上运行该程序，并在剩下的代码中识别任何错误。当我运行游戏时，我会输入一个单词让其他玩家猜，但当我猜到一个字母时，控制台上会出现一个错误：

script.js:63未捕获类型错误：无法读取的属性“toUpperCase” 在HTMLElement.processGuess script.js中未定义：63

我不知道为什么会这样。错误引用的行是：

document.getElementById("hangman").value.toUpperCase();

Javascript代码：

let word = prompt("Welcome to Hangman! Player 1, please enter a word for Player 2 to guess.").toUpperCase();
// note the switch toUpperCase(), we want to always work in upper case letters to avoid confusing 'a' and 'A' as unequal.

let revealedLetters = new Array(word.length); // creates an array with as many elements as word has characters. Each index of 
//revealedLetters will correspond to a character in word, and if revealedLetters[n] is truthy, then word[n] has been correctly guessed.
revealedLetters.fill(false);

const maxStrikes = 6; 
let strikes = 0; // the number of incorrect guesses made so far

let strikeLetters = new Array(maxStrikes); // this will contain every letter that has been incorrectly guessed.

drawWordProgress(); // run this now, to draw the empty word at the start of the game.

// Manipulates the DOM to write all the strike letters to the appropriate section in hangman.html
function drawStrikeLetters() {
    strikeL = document.getElementById("strikeLetters");
    let strikeText = "";

    for (let i = 0; i < strikeLetters.length; i++){
        strikeText += strikeLetters[i] + ", ";
        strikeL.innerHTML = "<p>" + strikeText + "</p>";
    }
    // your DOM manipulation code here
    // should create a String from strikeLetters and put that into the content of some element.
}

// Manipulates the DOM to write the successfully guessed letters of the word, replacing them with dashes if not yet guessed
function drawWordProgress() {

      let blankProgress = document.getElementById("correctword");
      let blankGuess = document.getElementById("guessword");
      blankGuess.innerHTML = "";
      for(j = 0; j <revealedLetters.length; j++){
          if(revealedLetters[j] != false){
              blankProgress.innerHTML += revealedLetters[j];
          }else{
              blankGuess.innerHTML += " _ ";

          }
      }

    // your DOM manipulation code here
    // should iterate over revealedLetters, and if the value at each index is truthy, print the corresponding letter from word. 
    //Otherwise, it should print a -.
}

// Manipulates the DOM to update the image of the gallows for the current game state.
function drawGallows() {
    event.preventDefault();
    let imgUpdate = document.getElementByTagName("gallowsimg"); //get the img with id "gallowsimg"
    imgUpdate.setAttribute("src", "images/strike-" + strikes + ".png"); //change the img according to number of strikes user has
}


document.getElementById("guess-form").addEventListener("submit", processGuess);

function processGuess(event){
   event.preventDefault();

   let guess = document.getElementById("hangman");

   document.getElementById("hangman").value.toUpperCase();
   document.getElementById("hangman").value = "";

   if(strikes < maxStrikes) {
       let guessIsCorrect = false;
       for(let l of word) {
           if(guess == l){
               guessIsCorrect = true;
               if(guessIsCorrect){
                   for(let t = 0; t < word.length; t++) {
                       if(word[t] == guess){
                           revealedLetters[t] = true;
                           drawWordProgress();
                       }else{
                           strikeLetters[strikes] = guess;
                           strikes++;
                           drawGallows();
                           drawStrikeLetters();
                       }
                   }
               }
           }
       }
   }else{
       alert("The game is over");
   }
}

Html代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Hangman!</title>

        <link rel="stylesheet" href="styles/style.css">

    </head>
    <body>

        <section id ="gallows">
            <p>section for picture of hanged man</p>
                <img id="gallowsimg" src="images/strike-0.png" alt="gallows">
            </section>

            <section id ="strikes">
                <p>strikes section shows incorrect guesses</p>
                <div id ="strikeLetters">
                    <p>

                    </p>
                </div>
            </section>

            <section id ="correctword">
                <div id ="guessword">

                </div>
                <p>word section that shows the word being guessed correctly</p>
            </section>

            <section id ="guess-form">
                <p>guess section that contains form where player can type in a letter to guess</p>
                <form id="hangman">
                    <input type="text" name="letter" id="letter" placeholder="Guess a letter" />
                    <input id="guess" name="guess" type="submit" value="Guess" />
                </form>
            </section>

    </body>
</html>

.值仅适用于。请尝试改用.innerHTML：

我认为你最初的问题是，你试图获得绞刑犯的价值，而你本应该得到字母的价值

即：document.getElementByIdletter而不是document.getElementByIdhangman

关于如何检查猜测的正确性以及增加打击，还有一些其他问题。我已将其替换为console.log语句，以便您可以完成其余部分

让word='hello'；设MaxStrokes=5；让罢工=0；让revealedLetters=[]；让罢工者=新的阵列罢工；//这将包含所有被错误猜测的字母。 drawWordProgress；//现在运行此命令，在游戏开始时绘制空单词。 //操纵DOM将所有罢工字母写入hangman.html中的相应部分函数删除器{ strikeL=document.getElementByIdstrikeLetters；让strikeText=；对于let i=0；i； } //这里是您的DOM操作代码 //应该从删除符创建一个字符串，并将其放入某个元素的内容中。 } //操纵DOM以写入单词的已成功猜出的字母，如果尚未猜到，则将其替换为破折号函数drawWordProgress{ } //操纵DOM以更新当前游戏状态下绞刑架的图像。功能绞架{ } document.getElementByIdguess-form.addEventListenersubmit，processGuess；函数processGuessevent{ 违约事件；让guess=document.getElementByIdletter.value； document.getElementByIdletter.value.toUpperCase； document.getElementByIdletter.value=； ifstrikes 罢工部分显示错误的猜测

单词部分，显示正确猜测的单词

猜测部分，包含玩家可以在其中键入字母进行猜测的表单

它发出另一个错误消息：Uncaught TypeError:无法将属性“innerHTML”设置为null

document.getElementById("hangman").innerHTML = document.getElementById("hangman").innerHTML.toUpperCase();