我正在尝试使用 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
TA贡献1831条经验 获得超4个赞
我认为您遇到的最初问题是您试图访问本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.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>
qq_花开花谢_0
TA贡献1835条经验 获得超7个赞
.value仅适用于<input>. 尝试使用.innerHTML：
document.getElementById("hangman").innerHTML = document.getElementById("hangman").innerHTML.toUpperCase();添加回答
举报
0/150
提交
取消