Así que estoy tratando de crear una especie de creador de mazos en JS, tengo el prototipo, pero quiero hacerlo un poco más modular. Así que hice un bucle else para crear botones DOM. El problema que tengo es que parece que no puedo averiguar cómo obtener la identificación / cualquier número del botón ESPECÍFICO que presioné.

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);
}

EDITAR, ya he intentado agregar

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

Después en el bucle for, y no funcionó,

2
Zain Wilson - WCH Student 21 ene. 2021 a las 21:40

1 respuesta

La mejor respuesta

Puede agregar un detector de eventos al botón. Con eso, puede obtener todos los datos que su botón contiene actualmente

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);
}

De esta forma puede acceder a cualquier dato que haya asignado al botón de antemano. En la función de devolución de llamada para click, puede hacer más cosas con sus datos.

Si no desea tener una función anónima dentro de su bucle, puede separarla de la siguiente manera:

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);
}

Consulte mozilla.org para obtener más información sobre eventlistener

1
Hoargarth 21 ene. 2021 a las 19:15