1

当我遇到问题时，我正在用 JavaScript 制作一个小游戏。在这个游戏中，我使用 for() 循环创建了一百个按钮。最终，我希望每个按钮都调用一个名为“click”的函数并向其发送一个 int，以便它知道按下了哪个按钮。因此，例如，当按下按钮四时，就会调用 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()'。感谢所有试图提供帮助的人！

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 回答