1

問題に遭遇したとき、私は JavaScript で小さなゲームを作っていました。このゲームでは、for() ループを使用して 100 個のボタンを作成します。最終的には、すべてのボタンで「クリック」と呼ばれる関数を呼び出し、int を送信して、どのボタンが押されたかを認識できるようにします。たとえば、ボタン 4 が押されると、click(4) が呼び出されます。最初にこれを試しました：

object.onclick = "click(4)";

それは明らかにうまくいかなかったので、インターウェブを検索し、あなたのサイトでこの質問に対する答えを見つけました。

object.onclick = function() {click("4");}

私はそれを試しました（最後に「;」の有無にかかわらず）が、うまくいかないようです。

ダミー コードのより完全な概要:

<script type="text/javascript">
   document.getElementById('myContainer').innerHTML += '<input id="tmp" type="button" value="button">';
   documengetElementById('tmp').onclick = function() {tmpFunc("bla");}

function tmpFunc(vari){
   alert(vari);
}

</script>

要素 myContainer は 100% 空です!

これは、試すための単なるダミー コードであることを忘れないでください。これはもっと簡単にできますが、最初に単純化して、面倒なコードを見る必要がないようにしました。

では、for ループで作成したボタンから関数を呼び出す最良の方法は何でしょうか? 私が使用する方法とはまったく異なる方法を知っている場合は、投稿してください。どのように解決されるかは気にしません。これが機能しない理由を誰かに説明してもらいたいのですが。

別の投稿でこの問題に与えられた解決策を使用していることを知っている限り、既に回答されている質問をしていないことを願っています。

- - - - - - アップデート - - - - - - -

誰かからの回答を得た後、少し変更しました。これは現在のコードです。ボタンが押されたときに select() は実行されません。ここに完全な JavaScript コードがあるので、試してみたい場合はコピーして貼り付けてください。

<script type="text/javascript">

function addButtons(){

    var disabled = false;

    for(var i = 1; i <= 100; i++){

        currentButton = '<input id="tmp" type="button" onclick="select(\''+i+'\')">'
        document.getElementById('myContainer').innerHTML += currentButton;
        document.getElementById('tmp').id = 'btn'+i;
        gb(i).disabled = disabled;
        gb(i).style.width = "60px";
        gb(i).style.height = "60px";
        gb(i).style.fontSize = "25pt";

        function alerts(nr){
            alert("test");
        }

        if(i%10 == 0){
            document.getElementById('myContainer').innerHTML = document.getElementById('myContainer').innerHTML + '<br />';
        }else{
            if(disabled){
                disabled = false;
            }else{
                disabled = true;
            }
        }

        if(i == 60){
            gb(i).value = 'O';
            gb(i).style.color = "blue";
        }

        if(((i-1)%10 == 0) && !(gb(i).disabled)){
            gb(i).value = 'X';
            gb(i).style.color = "red";
        }
    }
}

function select(nr){
    alert("Bla!"+nr);
    gb(nr).style.height = "100px";
}

function gb(ButtonNrVanHetButton){
    return document.getElementById('btn'+ButtonNrVanHetButton);
}

addButtons();

</script>

ほとんどの部分は、問題を解決するのにあまり興味深いものではありません (スタイルなど)。チェッカーボードのように見えるはずです。

- - - - - - アップデート - - - - - - -

解決しました！「select()」など、JavaScript ライブラリが既に使用している関数を使用しないでください。助けようとしたすべての人に感謝します！

4

2 に答える 2

3

ボタンを作成するためにループしている場合は、ボタンに onclick を追加してみませんか?

例えば

<script>
// your function
function tmpFunc(vari)
{
   alert(vari);
}
// end your function


// define xBUTTONS
xBUTTONS = '';
for (i=0; i<100; i++)
{
    // loop buttons
    xBUTTONS += '<input id="tmp" type="button" value="button" onclick="tmpFunc(\''+i+'\')">';
}

// insert buttons into myContainer
document.getElementById('myContainer').innerHTML = xBUTTONS;
</script>
于 2012-10-08T12:27:42.113 に答える
3

まず、常に を使用してイベントを添付しますaddEventListener。次に、動的に生成するボタンに ID を追加すると、次のようなことができます。

function click(){
    alert(this.id+" clicked");
}
var but;
for (var i=0,e=100,i<e;++i){
    but=document.createElement("input");
    but.id=i;
    ...//make it into your button
    but.addEventListener("click", click, false);
    document.body.appendChild(but);
}
于 2012-10-08T12:39:55.693 に答える