Question

找了一个关于这方面的指南，但实际上找不到任何特定内容，并认为你们可以提供帮助。

我有一个javascript文件，可以在onLoad上执行各种任务。目前我在HTML页面中有5个按钮，但我想要做的是从js文件中的数组中读取并根据数组中的内容动态创建多个按钮。

同样我希望点击的按钮被“收听”（改变js中的数组）

我知道我想读取数组元素并将它们设置为按钮ID并创建它们。同样，我想听一下它的ID被点击的按钮，并让它改变一个数组。但是我该如何实际进行这个过程呢？

干杯

Answer 1

这样的东西......？

<html>
  <head>
    <script type="text/javascript">
      var arrayToModify = [];
      window.onload = function () {
        var i, buttonsToCreate, buttonContainer, newButton;
        buttonsToCreate = ['button1','button2','button3','button4','button5'];
        buttonContainer = document.getElementById('this_element_contains_my_buttons');
        for (i = 0; i < buttonsToCreate.length; i++) {
          newButton = document.createElement('input');
          newButton.type = 'button';
          newButton.value = buttonsToCreate[i];
          newButton.id = buttonsToCreate[i];
          newButton.onclick = function () {
            alert('You pressed '+this.id);
            arrayToModify[arrayToModify.length] = this.id;
          };
          buttonContainer.appendChild(newButton);
        }
      };
    </script>
  </head>
  <body>
    <div id='this_element_contains_my_buttons'></div>
    <input type='button' onclick='alert(arrayToModify);' value='Show the buttons I have clicked' />
  </body>
</html>

编辑：我刚刚添加了一些功能来跟踪数组中的按钮按下，如上面的评论中所要求的那样

Answer 2

我建议你使用jQuery。它会使它变得更简单。

首先，要从按钮ID数组创建按钮，您可以执行以下操作：

var buttons = ['start', 'stop', 'foo', 'bar'];

for(var i = 0; i < buttons.length; i++){
    $('<button>')
        .attr('id', buttons[i])
        .text(buttons[i])
        .appendTo('div');
}

接下来，要听取按钮点击，您可以按如下方式修改上述内容：

var buttons = ['start', 'stop', 'foo', 'bar'];
var clicks = [];

for(var i = 0; i < buttons.length; i++){
    $('<button>')
        .attr('id', buttons[i])
        .text(buttons[i])
        .appendTo('div')
        .click(function(){
            clicks.push(this.id);
        });
}

我不太确定你想点击什么。你能详细说明一下吗？

Here's jsFiddle演示解决方案。

Answer 3

使用事件侦听器的event属性获取目标元素，然后获取ID：

foo.onclick = function(event) {
    alert(event.target.id);
}

动态按钮javascript

3 个答案: