Why can't javascript find my functions?

Question

I made a puzzle game using HTML5, just now I tried to add local storage to the game, but failed.

I wrote three functions. The problem is: If I put all the functions in one .js file, none is defined when debugging(via chrome). If I split these three functions to another file and add a tag to the .html file, I'm told these are not defined.

So how to solve this problem?

Sorry for my poor English, hope you understand what I means.

Here are my functions and html file.

<html>
<head>
<meta charset="utf-8">
<title>Puzzle</title>
<script src="puzzle-localstorage.js"></script>
<script src="puzzle.js"></script></script>
</head>

<body onLoad="Init()" onkeydown="keydown()">
<p align="center">
    <canvas id="board" height="600" width="600" style="border-style:double">
        Your Browser doesn't support canvas
    </canvas>
</p>
<p id="moves">Moves: <span id="movecount">0</span>
<input type="number" id="boardEdgeNum" value="3"/>
<input type="file" id="imgSrc"/>

</p>

function supportsLocalStorage() {
try {
return 'localStorage' in window && window['localStorage'] !== null;
} catch (e) {
return false;
    }
}



function saveGameState() {
if (!supportsLocalStorage()) { return false; }
localStorage["puzzle.boardEdge"] = boardEdge;
localStorage["puzzle.blockPixel"] = blockPixel;
for (var i = 0; i < boardEdge; i++) {
    for(var j=0;j<boardEdge;j++){
        localStorage["puzzle.gameStatus."+i+j] = gameStatus[i][j];
    }
}
localStorage["puzzle.image.src"]=imgElement.src;
localStorage["puzzle.move.count"] = moveCount.textContent;
if(gameInProgress)localStorage["puzzle.game.in.progress"] = "true";
else localStorage["puzzle.game.in.progress"]="false";
localStorage["puzzle.empty.block.X"] = emptyBlock.X;
localStorage["puzzle.empty.block.Y"] = emptyBlock.Y;
return true;
}

function resumeGame() {
if (!supportsLocalStorage()) {return false;}
if(!localStorage["puzzle.game.in.progress"]=="true"){return false;}
boardEdge=parseInt(localStorage["puzzle.boardEdge"]);
blockPixel=parseInt(localStorage["puzzle.blockPixel"]);
imgElement=new Image();
imgElement.src=localStorage["puzzle.image.src"];
gameStatus=new Array(boardEdge);
gameCompStatus=new Array(boardEdge);
for (var i = 0; i < boardEdge; i++) {
    gameStatus[i]=new Array(boardEdge);
    gameCompStatus[i]=new Array(boardEdge);
    for(var j=0;j<boardEdge;j++){
        gameStatus[i][j]=parseInt(localStorage["puzzle.gameStatus."+i+j]);
        var x=(gameStatus[i][j]-1)%boardEdge;
        var y=(gameStatus[i][j]-1-j)/boardEdge;
        drawingContext.drawImage(imgElement,x*blockPixel,y*blockPixel,blockPixel,blockPixel
                                            j*blockPixel,i*blockPixel,blockPixel,blockPixel);
        drawLines();
    }
}
gameStatus[boardEdge-1][boardEdge-1]=0;
gameCompStatus[boardEdge-1][boardEdge-1]=0;

moveCount.textContent=localStorage["puzzle.move.count"];
gameInProgress=(localStorage["puzzle.game.in.progress"] =="true");
emptyBlock=new Cell(parseInt(localStorage["puzzle.empty.block.X"]),parseInt(localStorage["puzzle.empty.block.Y"]));
return true;
}

Are you using a browser with a good debugger/inspector? Firefox with Firebug, IE 8 or 9 (which comes with F12 developer tools), and I believe Chrome has it built in too. Log to the console, step through your code. Reading the answers below, if any of them are correct it will be immediately apparent with the right JavaScript tools in your browser. — Paul
– Paul, Commented Jul 24, 2011 at 19:26

Ruslan Polutsygan · Accepted Answer · 2011-07-24 16:18:38Z

1

<script src="puzzle.js"></script></script>

What is this? Is it typo? Or in your real code it is so too? Try to remove them. Javascript should see your functions. Where is declarations for Init and keydown functions? Does javascript see them?

answered Jul 24, 2011 at 16:18

Ruslan Polutsygan

4,4612 gold badges28 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tcooc · Accepted Answer · 2011-07-24 16:29:06Z

0

Have you checked for any errors? I see one in the loop of resumeGame:

    drawingContext.drawImage(imgElement,x*blockPixel,y*blockPixel,blockPixel,blockPixel
                                        j*blockPixel,i*blockPixel,blockPixel,blockPixel);

should probably be:

    drawingContext.drawImage(imgElement,x*blockPixel,y*blockPixel,blockPixel,blockPixel,
        j*blockPixel,i*blockPixel,blockPixel,blockPixel);

answered Jul 24, 2011 at 16:29

tcooc

21.4k3 gold badges42 silver badges57 bronze badges

2 Comments

Jon Martin Over a year ago

That wouldn't cause the function to be undefined.

Muleskinner Over a year ago

Always a good to start checking that your code is valid - a typo in the .js file could very well be the issue here

FK82 · Accepted Answer · 2011-07-24 19:21:27Z

0

Your url might be wrong. You are using a relative url instead of an absolute url, consequently the JS file must be in the same folder as the HTML Document.

Try an absolute url (e.g. http://www.servername.com/puzzle/js/puzzle.js") instead and check if that accomplishes anything.

answered Jul 24, 2011 at 19:21

FK82

5,0754 gold badges34 silver badges44 bronze badges

Collectives™ on Stack Overflow

Why can't javascript find my functions?

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related