时间戳

首页 > 解决方案 > 从按下的 DOM 创建的按钮中收集数据

javascript - 从按下的 DOM 创建的按钮中收集数据

问题描述

所以我试图在 JS 中创建一种甲板创建器，我有原型，但我想让它更加模块化。所以我做了一个 else 循环来创建 DOM 按钮。我遇到的问题是我似乎无法弄清楚如何从我按下的特定按钮中获取 id/任何数字。

var cardName = ["Card 1", "Card 2", "Card 3", "Card 4", "Card 5", "Card 6"]
var Card;
var isInDeck = ["false", "false", "false", "false", "false"];
var Deck = [];
for (var i = 0; i < cardName.length; i++) {
  var button = document.createElement("button");
  button.innerHTML = cardName[i];
  button.classList = "Button";
  button.setAttribute('id', cardName[i]);
  document.getElementById("buttonPlace").appendChild(button);
}

编辑，我已经尝试添加

button.onClick = function () {Card = i;}

在for循环之后，它没有工作，

标签： javascript

解决方案

您可以向按钮添加事件监听器。有了它，您可以获得按钮当前保存的所有数据

for (var i = 0; i < cardName.length; i++) {
  var button = document.createElement("button");

  ... // your button setup

  button.addEventListener('click', function() {
      console.log(this); // this is your button element
      console.log(this.id); // this is the ID you assigned with "setAttribute"
  });

  document.getElementById("buttonPlace").appendChild(button);
}

这样您就可以访问事先分配给按钮的任何数据。在回调函数中，click您可以对您的数据做进一步的处理。

如果您不想在循环中包含匿名函数，则可以将其分开，如下所示：

function myFunction() {
    console.log(this); // this is your button element
    console.log(this.id); // this is the ID you assigned with "setAttribute"
}

for (var i = 0; i < cardName.length; i++) {
  var button = document.createElement("button");

  ... // your button setup

  button.addEventListener('click', myFunction);

  document.getElementById("buttonPlace").appendChild(button);
}

在mozilla.org 上查看有关 eventlistener 的更多信息

推荐阅读