Function not defined error in Javascript

Question

i am building a game in javascript along with html5. I want my front page to display a bit of text and then when i press any button suppose if "p" then the actual game starts. I have used flag in this case to toggle btw two functions one which brings the front page and another which is actually starting the game. here's my code

var flag1 =true;
function init() 
 {
  canvas = document.getElementById('canvas');
  region = canvas.getContext('2d');
  if(flag1==true)
   {
    front();
   }
  else
   {
    start();
   }  
 }
function front()
 {
   document.write("press p to play");

   document.onkeydown = function(event) 
   {

     var keyCode; 
     if(event == null)
    {
     keyCode = window.event.keyCode; 
    }
    else 
    {
    keyCode = event.keyCode; 
    }

    switch(keyCode)
    {
       case 80:
       flag1=false;
       init();
       break;

       default: 
       break;

     }
 }
 }

 function start()
 {
  *************
   *********
  *********
 }

This code is giving an error in console when ever i press p, ie. init() is not defined Can anyone sort this problem?

Answer 1

init() runs for me in chrome. Which browser are you using? What scope is the code in?

Also, as far as I know, JavaScript might be misparsed if it is not indented like so:

if (bool) {
  // stuff
}

Try running your code through jslint .

Answer 2

Answer: http://jsfiddle.net/morrison/HrRD6/

Notes:

• There's no point in finding canvas again if you've already found it. Storing the canvas to lib.canvas and not retrieving it again seems to be what fixed the problem.
• Use library-style functions . This helps avoid naming conflicts.
• Tidy your code. I use jsfiddle a lot, so I run it through there, or you can try formatjavascript or javascriptbeautifier .