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循环中创建的按钮调用函数的最佳方法是什么？如果你知道一种方法可以完全不同于我使用它发布的那个，我不在乎它是如何解决的！虽然我也想让某人解释为什么这不起作用。

希望我没有问过一个已经回答过的问题，据我所知，我在另一篇文章中使用了解决这个问题的解决方案。

------------ UPDATE -------------

在得到某人的答案后改变了一下。这是当前代码，按下按钮时不执行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>

大多数部件对于解决问题（样式等）并不是很有趣。它应该看起来像棋盘格。

------------ UPDATE -------------

已解决！请勿使用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>

Answer 2

首先关闭，始终使用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);
}

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

2 个答案: