Question

I’m attempting to create an html element as a jQuery object, and then reference it later in a javaScript function. After I pass it to the function as a parameter, however, the object becomes ‘undefined.’

//globals
var handCanvasArray = new Array();
var canvasIdNum = 0;

Upon clicking a jQuery Mobile button, I create a new canvas element, store it in an array, and attempt to use it in a function:

//this code fires due to a button click
handCanvasArray[canvasIdNum] = $(document.createElement('canvas'));

//store the current canvasIdNum, then increment it for the next click
currCanvasID = canvasIdNum;
console.log("CurrCanvasID: " + currCanvasID);
canvasIdNum += 1;
Animate(handCanvasArray[currCanvasID]);

function Animate(pCanvasToAnimate) {
  console.log(pCanvasToAnimate);
  var canvasOffset = pCanvasToAnimate.offset();
}

The console prints two lines:
[object Object]
undefined

Program execution stops at attempting to assign the offset to a variable, due to the fact that pCanvasToAnimate is not considered to be an object. Perhaps I’m declaring the new element incorrectly? Or, perhaps I’m just mistaken/confused about how javascript handles object parameters.

Is there a better way to pass objects as parameters?

Edit: Editing for clarity. Sorry folks! Realized I left out some code regarding the index for the array, but the currCanvasID variable will equal canvasIdNum when Animate() is called. I increment it so that the next time I click, that canvas will be stored in the next index (the overall flow for this could very well be improved at the moment 😉 ).

Answer 1

If you declare your handCanvasArray as global, try to pass only a currCanvasID to your Animate() function and then reference the handCanvasArray directly from it.

K