我正在尝试使用 JS 完成刽子手任务。我正在尝试完成function processGuess(event)，以便我可以在控制台上运行该程序并识别其余代码中的任何错误。 当我运行游戏时，我甚至可以输入一个单词让另一个玩家猜测，但是当我"猜"一个字母时，控制台上会出现一个错误：
script.js：63 未捕获的类型错误：无法读取属性"到大写" undefined at 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");
}
}
网页代码：
<!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>
我认为您遇到的原始问题是，当您应该获得letter的值时，您正在尝试访问hangman的值。
也就是说：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.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() {
}
// 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>.value仅适用于<input>。请尝试改用.innerHTML：
document.getElementById("hangman").innerHTML = document.getElementById("hangman").innerHTML.toUpperCase();