setTimeoutで引数を配列にできるか

画面全体に50行×50列くらいのtd（背景色がピンク）を持ったtableを配置し、それぞれのtdにマウスが乗ったらそのtdの背景色を青くして、マウスがtdの外に出たら1秒後にピンク色に戻すものを作ろうと思ってます。つまり、tdを画素に見立てた簡単なペイントに似たものを作ろうということです。

そのために以下のjavascriptを書きました。

window.onload = function(){
td = document.getElementsByTagName("td");
for(i=0;i<td.length;i++){
td[i].onmouseover = ChCo;
td[i].onmouseout =　setTimeout("ClCo('"+td[i]+"')",1000);

}
function ChCo(){
this.style.backgroundColor = "blue";
}
function ClCo(hoge){
hoge.style.backgroundColor = "pink";
}
}

この場合、onmouseoverの青くするところはうまくいくのですが、onmouseoutのsetTimeoutのところがうまくいきません。どうも、setTimeoutに設定したClCoの引数がうまく渡ってないような感じなのですが、どこが間違っているのでしょうか。

No.1 ベストアンサー 回答者： redfox63 回答日時： 2008/11/25 03:38

TDタグのコレクションをグローバル変数にして pinkに変えるメソッドとmouseoutのハンドラを分けてみてはいかがでしょう

変数tdを スクリプトブロックの冒頭で宣言しておきます
var td;

pinkに変えるメソッドをchangePinkとします
window.onloadでは
td[i].onmouseout = ClCo;
としておきます

function ClCo()
{
　　var n;
　　for ( n = 0; n < td.length; n++ ) {
　　　　//　自分自身を配列tdから探します
　　　　if ( td[n] == this ) {
　　　　　　window.setTimeout( "changePink(" + n + ")", 1000 );
　　　　　　break;
　　　　}
　　}
}

function changePink( n )
{
　　td[n].style.backgroundColor = "pink";
}
といった具合で ・・・

この回答へのお礼

ありがとうございます。提案された方法でうまく動作することができました。数日間悩んでいたのですが、やっと解決できました。ありがとうございました。

お礼日時：2008/11/26 04:26

No.2 回答者： edvakf 回答日時： 2008/11/25 03:51

setTimeoutの引数でStringとして関数を指定する場合は、実行時にそれがevalされてグローバルスコープで実行されるためだと思います。

しかし、ClCoは無名関数 (window.onloadに指定された) 内で定義されているため、グローバルスコープでは見えません。

しかも質問の例だと、ClCoにはtd[i]というオブジェクトを渡しているように見えますが、実際にはtd[i]をtoStringした文字列が渡されているだけです。

試してませんが、

setTimeout(function(){ClCo(td[i])},1000);

と無名関数で書くなどすればよいかもしれません。

この回答へのお礼

提案された方法では、残念ながらうまくいきませんでしたが、setTimeoutの仕組みについて理解が深まりました。

ありがとうございました。

お礼日時：2008/11/26 04:24