My html code is not running when I include javascript code

Question

I'm practicing html, css and javascript, and I have been trying to run this code but ended up failing to do so. I couldn't figure out where I went wrong. All your efforts are appreciated.

<!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>

What html code is not working? I cant see any html code in the body? — Shubhranshu, Jan 28 '17 at 11:29
I made you a snippet - fix the errors you see in the console - next time hit F12 to see the error. — mplungjan, Jan 28 '17 at 11:30
Also allow the user to stop by not entering anything `if (!guessColor || guessColor.toUpperCase() == targetColor.toUpperCase()) finished = true;` — mplungjan, Jan 28 '17 at 11:43
Whenever you have something a problem, please add the error message or stack trace, so that it would ease finding the problem. — Amir, Jan 28 '17 at 11:54

score 0 · Answer 1 · edited May 23 '17 at 12:16

You should change what you assign to colors. Currently you assign an object and not an array as it is expected.

Then you could remove the onload="do_game()" form the body element and add an event listener, which would listen to the window load event

Why we wrapped all code in a function called func?

We did so, in order to not pollute the 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>

It is still a typo question. `window.onload` is more compatible - and now complicate things with nested functions — mplungjan, Jan 28 '17 at 11:38

score 0 · Answer 2 · answered Jan 28 '17 at 11:34

Your Array declaration, it should be

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>

You already saw the comments. Please do not answer typo questions — mplungjan, Jan 28 '17 at 11:36

My html code is not running when I include javascript code

2 Answers2