HTML，JavaScript：從window.onclick函數獲取值

Question

我正在嘗試創建一個包含一堆畫布元素的網頁，每個畫布元素都使用繪制的圖片進行初始化，每個頁面都有一個“下一步”按鈕，該按鈕可循環瀏覽服務器端存儲的其他文件。 為了使它起作用，我需要下一個按鈕來了解當前在其相應的canvas元素中顯示的圖像。 據我所知，該信息無法存儲在單個按鈕元素中，也不能存儲在canvas元素中，因此讓我覺得我需要一個全局變量來存儲所有的canvas元素以及它們當前顯示的圖像的名稱，這樣，當單擊“下一步”按鈕時，它可以查找其畫布元素和圖像，確定應繪制的下一幅圖像，然后繪制它。

但是，要查找頁面中的所有canvas元素，我似乎需要window.onload函數來確保僅在頁面完全加載后才收集它們。 但是，我找不到在該函數內部，外部和全局變量中獲取所收集信息的方法。 我看到一個人演示了如何將內容放到在函數外部創建的列表中，從而可以在函數內部更新列表的內容-由於此操作是通過按引用傳遞而不是通過-按值排列，列表將在函數外部可用，並填充有適當的信息。 但是，對於我的特定應用程序，這意味着我需要在創建列表時知道列表的長度...但是腳本只能在window.onload函數中了解列表的長度。 所以我似乎陷入了困境。

舉一個最小的例子，下面是我不必預先指定數組長度的情況下要編寫的代碼。 我用數字1表示每個畫布都從第一個圖像開始（在我的HTML和JavaScript的其余部分中，我可以將畫布元素與數字配對，以便它們找到合適的圖像進行繪制）。

var canList = new Array();

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

我想要的行為是我能夠在代碼的其他地方使用canList 。 顯然，這是行不通的，因為我沒有在變量聲明中指定canList的長度，但是我只能通過首先創建cans變量才能發現這一點。 如果我將canList變量聲明移到函數內部，它將在外部不再可用。

Answer 1

您無需在創建時定義數組的長度。 簡單地說：

var array = new Array();

要么

var array = [];

然后，您可以根據需要定義以下任一索引：

array[n] = value;

Answer 2

似乎您要問的是如何在不將其初始化為一定大小的情況下向Javascript數組添加條目。 為此，您可以使用array.push ：

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

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/push

或array.unshift如果要將其添加到數組的開頭：

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

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift

盡管有名稱，但Javascript中的數組的功能類似於鏈表。