Jquery number of clicks record

Question

Hi,

I am working on this page where I'm using a Jquery Mp3 Player (Jplayer) with its playlist. What I want to do is very simple in theory: I want to record the number of clicks for every playlist element.

• When someone enters the page, his number of clicks are at 0 for every element.
• The visitor can click a few times on element #1, then go to element #2 (which will be at 0), then come back to element #1 and the number of clicks must be saved.
• We don't need to save it for next visits.

Jplayer has this function that loads each time a new playlist element is being loaded: function playListChange( index )

In which every element has its own ID dynamically updated: myPlayList[index].song_id

Here's my code:

function playListChange( index ) {
var id = myPlayList[index].song_id;
if(!o) { var o = {}; }
if(!o[id]) { o[id] = 0; }
alert(o[id]);
… $("#mydiv").click { o[id] = o[id]+1; } …

But o[id] is reset every time and the alert always shows 0. Why?

Thanks for any reply.

Answer 1

The problem is the scope of the variable o. If you define it using the var function, it will only exist for one invocation of the function. Try

function playListChange( index ) {
var id = myPlayList[index].song_id;
if(!window.o) { window.o = {}; }
if(!window.o[id]) { window.o[id] = 0; }
alert(window.o[id]);
… $("#mydiv").click { window.o[id] = window.o[id]+1; } …

That should force it into the global scope (a property of window, the global call object in client-side JavaScript) and it should work.

Edit: this explicit way of making the variable a window property is the safest, I guess.

There is an excellent explanatory article on scope in JavaScript here.

Answer 2

The first answer here is correct in part, but I don't think his suggestion works. The issue is definitely variable scoping, but just removing the var command won't push the variable to the global scope if it doesn't exist. You need to place var o = {}; outside of your playListChange function. Something like this:

var o = {};

function playListChange( index ) {
  var id = myPlayList[index].song_id;
  if(!o[id]) { o[id] = 0; }
  alert(o[id]);
  $("#mydiv").click { ++o[id]; }
}