HTML，JavaScript：从window.onclick函数获取值

Question

I'm trying to make a webpage with a bunch of canvas elements, each one being initialized with a picture drawn to it, and each one having a "next" button that cycles through a bunch of other files stored server-side. In order to get this to work I need the next button to be aware of which image is currently displayed in its corresponding canvas element. That information can't be stored in the individual button element nor in the canvas element as far as I know, so that leaves me thinking I need a global variable storing all of the canvas elements paired with the name of their currently displayed image--that way when the "next" button is clicked it can look up its canvas element and image, decide what next image should be drawn, and draw it.

However, to find all the canvas elements in the page, I seem to need the window.onload function to make sure I only collect them after the page has fully loaded. However, I can't find a way to get the information that I collect inside of this function, outside and into a global variable. I saw one person show how, if you just put stuff in a list that you create outside the function, you can update the contents of the list inside the function--and since this is done by pass-by-reference rather than pass-by-value, the list will be available outside the function and get filled with the appropriate information. However, for my particular application, that means that I need to know the length of the list upon creating it ... but the script only gets to learn that inside the window.onload function. So I seem to be in a catch-22.

To give a minimal example, below is the code that I would write if I didn't have to specify the length of the array in advance. I use the number 1 to indicate that each canvas starts at the first image (in the rest of my HTML and JavaScript I have a way of pairing canvas elements to numbers so that they find the appropriate image to draw).

var canList = new Array();

window.onclick = function() {
    var cans = document.getElementsByTag("canvas");
    for (i = 0; i < cans.length; i++) {
        canList[i] = [cans[i],1];
    }
}

The behavior I want is for me to be able to use canList elsewhere in the code. Obviously that won't work because I haven't specified the length of canList in the variable declaration, but I can only find that out by first creating the cans variable. If I move the canList variable declaration inside the function, it will no longer be available outside.

Answer 1

You don't need to define the length of the array on creation. Simply say:

var array = new Array();

or

var array = [];

Then you can define any one of the indices as you need with:

array[n] = value;

Answer 2

It seems like what you're asking is how to add entries to a Javascript array without having to initialize it to a certain size. To do that, you can use array.push :

var array = [];
array.push(1);
array.push(2);
array.push(3);
// array will be [1, 2, 3]

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push

or array.unshift if you want to add it to the beginning of the array:

var array = [];
array.unshift(1);
array.unshift(2);
array.unshift(3);
// array will be [3, 2, 1]

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift

Arrays in Javascript, despite the name, function like linked lists.