2017-02-20 7 views
0

私は、キャンバス要素の束を使ってWebページを作成しようとしています。それぞれ、描画された画像で初期化され、ボタンは、サーバー側に格納された他のファイルの束を循環します。これを機能させるには、対応するキャンバス要素に現在どの画像が表示されているのかを知るために次のボタンが必要です。その情報は、私が知る限り個々のボタン要素やキャンバス要素に格納することはできません。そのため、現在表示されている画像の名前とペアになっているすべてのキャンバス要素を格納するグローバル変数が必要です。こうすることで、「次へ」ボタンをクリックすると、そのキャンバス要素と画像を検索し、次に描画する画像を決定し、描画することができます。HTML、JavaScript:window.onclickの関数から値を取得する

しかし、ページ内のすべてのキャンバス要素を検索するには、ページが完全に読み込まれた後にのみ収集するように、window.onload関数が必要なようです。しかし、私は、この関数の内部で、グローバル変数の外側に、そしてグローバル変数に集めた情報を取得する方法を見つけることができません。あなたが関数の外で作成したリストに要素を入れるだけであれば、関数内のリストの内容を更新することができます。また、これはパススルーではなく参照渡しで行われるため、値によって、リストは関数外で利用可能になり、適切な情報で満たされます。しかし、私の特定のアプリケーションのために、それはそれを作成したときにリストの長さを知る必要があることを意味します...しかし、スクリプトはwindow.onloadの機能の中でそれを学ぶだけです。だから私はキャッチ22にいるようだ。

最小限の例をあげると、あらかじめ配列の長さを指定する必要がない場合は、以下のコードを記述します。私は、各キャンバスが最初のイメージから始まることを示すために番号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変数宣言を移動すると、その変数宣言は関数の外部で使用できなくなります。

答えて

1

作成時に配列の長さを定義する必要はありません。単純に言う:あなたが必要として

var array = new Array(); 

または

var array = []; 

が次にあなたがインデックスのいずれかを定義することができます:それはのように思える

array[n] = value; 
1

あなたが求めているものがどのように特定のサイズに初期化することなく、Javascript配列にエントリを追加します。それを行うには、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

またはarray.unshiftを使用すると、配列の先頭に追加したい場合:

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

配列でJavascriptは、名前にもかかわらず、リンクされたリストのように機能します。

関連する問題