Question

我正在练习html，css和javascript，我一直在尝试运行此代码，但最终没有这样做。我无法弄清楚我哪里出错了。所有的努力都表示赞赏。

<!doctype html>
<html>

<head>
  <title>Example of a function</title>
  <script>
    var colors = {
      "blue", "green", "red"
    };
    var guessColor;
    var guesses = 0;
    var finished = false;
    var target_index;
    var targetColor;

    function do_game() {
      var randomNo = Math.random() * 3;
      var randomNo_integer = Math.floor(randomNo);
      target_index = randomNo_integer;

      targetColor = colors[target_index];

      while (!finished) {
        guessColor = prompt("I am thinking of one of these colors:\n\n" +
          "Blue, Green, Red\n\n" +
          "What color am I thinking of?");

        if (guessColor.toUpperCase() == targetColor.toUpperCase())
          finished = true;
      }
      document.body.style.backgroundColor = guessColor.toLowerCase();
    }
  </script>
</head>

<body onload="do_game()">
</body>

</html>

Answer 1

您应该更改分配给colors的内容。目前，您可以按预期分配对象而不是数组。

然后你可以从body元素中删除onload="do_game()"并添加一个事件监听器，它会监听窗口加载事件

为什么我们将所有代码都包装在一个名为func的函数中？

我们这样做了，为了不污染global namespace。

function func(){
  var colors = ["blue", "green", "red"];
  var guessColor;
  var guesses = 0;
  var finished = false;
  var target_index;
  var targetColor;
  function do_game(){
    var randomNo = Math.random() * 3;
    var randomNo_integer = Math.floor(randomNo);
    target_index = randomNo_integer;

    targetColor = colors[target_index];

    while(!finished){
      guessColor = prompt("I am thinking of one of these colors:\n\n" +
                          "Blue, Green, Red\n\n" +
                          "What color am I thinking of?");

      if( guessColor.toUpperCase() == targetColor.toUpperCase())
        finished = true;
    }
    document.body.style.backgroundColor = guessColor.toLowerCase();
  }

  // Here we call our function that will trigger the start of the game.
  // This function would be called when the DOMContentLoaded event is fired.
  do_game();
}

window.addEventListener("load", func);

<h1>Game Title</h1>

Answer 2

你的数组声明，它应该是

var colors = [
  "blue", "green", "red"
];

<!doctype html>
<html>

<head>
  <title>Example of a function</title>
  <script>
    var colors = [
      "blue", "green", "red"
    ];
    var guessColor;
    var guesses = 0;
    var finished = false;
    var target_index;
    var targetColor;

    function do_game() {
      var randomNo = Math.random() * 3;
      var randomNo_integer = Math.floor(randomNo);
      target_index = randomNo_integer;

      targetColor = colors[target_index];

      while (!finished) {
        guessColor = prompt("I am thinking of one of these colors:\n\n" +
          "Blue, Green, Red\n\n" +
          "What color am I thinking of?");

        if (guessColor.toUpperCase() == targetColor.toUpperCase())
          finished = true;
      }
      document.body.style.backgroundColor = guessColor.toLowerCase();
    }
  </script>
</head>

<body onload="do_game()">
</body>

</html>

Answer 3

是的，您的所有代码都是正确的。但有一点你需要纠正。您接受变量colors var colors = {"blue", "green", "red"};，但您已将其视为JavaScript对象。您需要将其声明为Array

正确的代码应为var colors = ["blue", "green", "red"];

尝试一次，您将获得预期的结果！：）

当我包含javascript代码时，我的html代码没有运行

3 个答案: