使用javascript在刽子手游戏中出现的错误代码
我正在尝试使用 JS 完成刽子手任务。我正在尝试完成，function processGuess(event)以便我可以在控制台上运行程序并在我的其余代码中识别任何错误。当我运行游戏时，我可以输入一个单词让另一个玩家猜测，但是当我“猜测”一个字母时，控制台上会出现一个错误：
script.js:63 未捕获的类型错误：无法读取 HTMLElement.processGuess (script.js:63) 处未定义的属性“toUpperCase”。
我不确定为什么会这样。错误所引用的行是：
document.getElementById("hangman").value.toUpperCase();
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>
慕莱坞森2回答
-
慕容708150
我认为您遇到的最初问题是您试图访问本hangman应获得letter.那就是：document.getElementById("letter")而不是document.getElementById("hangman").您如何检查猜测的正确性以及递增还存在其他一些问题strikes。我已将其替换为console.log声明，以便您可以完成其余部分。let word = 'hello';let maxStrikes = 5;let strikes = 0;let revealedLetters = [];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.htmlfunction 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 guessedfunction drawWordProgress() {}// Manipulates the DOM to update the image of the gallows for the current game state.function drawGallows() {}document.getElementById("guess-form").addEventListener("submit", processGuess);function processGuess(event){ event.preventDefault(); let guess = document.getElementById("letter").value; document.getElementById("letter").value.toUpperCase(); document.getElementById("letter").value = ""; if(strikes < maxStrikes) { let guessIsCorrect = false; if (word.indexOf(guess) !== -1) { console.log(`correct: ${guess}`); } else { console.log(`incorrect: ${guess}`); } }else{ alert("The game is over"); }}<!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> -
qq_花开花谢_0
.value仅适用于<input>. 尝试使用.innerHTML：document.getElementById("hangman").innerHTML = document.getElementById("hangman").innerHTML.toUpperCase();
随时随地看视频慕课网APP
相关分类
JavaScript