Question

我很困。我正在为一个班级创建一个子手游戏，但无法在HTML中生成和显示单词。我们要求将它们显示为下划线，但我也无法使其显示为HTML。我已经能够将其显示在控制台中，但不能显示在我的HTML中。我们将不胜感激，也为您提供了任何故障排除方面的帮助。

请查看代码。

//horror movie titles selected to guess
var movieTitles = [
  "halloween",
  "suspiria",
  "audition",
  "hereditary",
  "the beyond",
  "the evil dead",
  "the blair witch project"
];

//letters already guessed
var guessedLetters = [];

var numOfLetters = [];

//randomly assigned variable
var movieToGuess = null;

//attempts left
var livesLeft = 8;

//games won
var wins = 0;

//games lost
var losses = 0;

  window.onload = function() {
  updateMovieToGuess();
};

var updateMovieToGuess = function() {
  for (var i = 0; i < numOfLetters.length; i++){
  numOfLetters[i] = "_".join(" ");
}


 var movieToGuess = movieTitles[Math.floor(Math.random() * movieTitles.length)];

document.getElementById("movie-title").innerHTML = movieToGuess;

};

<!DOCTYPE html>
<html lang="en">

<head>
<title>Hangman</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="javascript/games.js"></script>
<link href="https://fonts.googleapis.com/css?family=IM+Fell+Double+Pica+SC" rel="stylesheet"> </head>

<body>
<p>Press any key to get started<span id='any-key'> </span> </p>
<p>Movie Title:<span id="movie-title"> </span> </p>
<p>Letters Guessed: <span id='letters'> </span> </p>
<p>Lives Remaining:<span id='lives-left'> </span> </p>
<p>Movies You've Survived:<span id='wins'> </span> </p>
<p>Movies You Died In:<span id='lost'> </span> </p>
<footer> </footer>
</body>
</html>

Answer 1

两个问题：

querySelector正在寻找<movie-title>而不是<span id="movie-title">。要解决此问题，请使用getElementById而不是querySelector，或将movie-title更改为#movie-title。
正如Mark Meyer在评论中指出的那样，您在设置movieToGuess之前就使用了它。

编辑：我看到您在回答问题后编辑了您的问题及其代码。您已解决问题2，但未解决问题1。更糟糕的是，您引入了一个新问题：现在，您在updateMovieToGuess内而不是在顶层通过window.onload将呼叫添加到updateMovieToGuess上，因此它永远不会被调用（基本上，您已经创建了鸡和鸡蛋的问题）。

将功能加载到HTML //生成随机词

1 个答案: