javascript - 如何更改动态创建的按钮调用的函数？

Question

当我遇到问题时，我正在用 JavaScript 制作一个小游戏。在这个游戏中，我使用 for() 循环创建了一百个按钮。最后，我希望每个按钮都调用一个名为“click”的函数并向它发送一个 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>

大多数部分对于解决问题(样式等)不是很有趣。它应该看起来像棋盘。

------------更新------------

已解决! 不要使用 javascript 库已经用于其他内容的函数，例如:'select()'。感谢所有试图提供帮助的人!

Answer 1

如果您要循环创建按钮，为什么不向按钮添加一个 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>