Type Error $ is not a function

Question

I am using jQuery Memory Game on my website. It works well overall, but I want the "Play Again" link and statistics at the end to be displayed. I can not get this code to work. I see this error:

TypeError: $ is not a function [Break On This Error] var game = $('div.slashc-memory-game'); // get the game 

Here is the JS:

  // this script shows how you can get info about the game var game = $('div.slashc-memory-game'); // get the game var info = $('p#info').find('span'); // get the info box var playAgain = $('a#play-again').css('visibility', 'hidden'); // get the play again link // format time like hh:mm:ss var formatTime = function(s) { var h = parseInt(s / 3600), m = parseInt((s - h * 3600) / 60); s = s % 60; return (h < 10 ? '0' + h : h) + ':' + (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s); } // listen for game 'done' event game.bind('done', function(e) { // show basic stats var stats = game.slashcMemoryGame('getStats'); info.html('Success ! Number of clicks : ' + stats.numClicks + ', elapsed time : ' + formatTime(parseInt(stats.time / 1000)) + '.'); playAgain.css('visibility', 'visible'); // show link }); // play again action playAgain.click(function(e) { playAgain.css('visibility', 'hidden'); // hide link info.html('Memory Game, click to reveal images'); // reset text game.slashcMemoryGame('restart'); // restart game e.preventDefault(); }); 

Here is the fiddle

Answer 1

Try replacing $ () with jQuery () and see if you continue with this error. An error indicating that it is not a function means that either the jQuery file has not yet been loaded, or the name $ was deliberately freed.

If the jQuery () function does not work, make sure you load the jQuery file before the block / script file.

Answer 2

since the fiddle automatically adds the onload function, your code really works fine: http://jsfiddle.net/ZXMUB/5/

Everything I did was uncommented in the first line where the game variable was assigned, and remove the closing </script> from the js window.

Are you sure that on your actual site, the code is inside the $ (document) .ready (or something similar) function and the jQuery library loads correctly?

Answer 3

There was no document handler in your code. Updated:

http://jsfiddle.net/ZXMUB/1/

Answer 4

wrap your code in a "ready" function, for example

 $(function(){ ... }); 

Your code is executed before jquery is loaded.