如何使用 JavaScript 检索也在 JavaScript 中创建的 html 元素

Question

html 按钮是用 JavaScript 创建的，每个按钮都有自己的 ID。它们在按下时激活相同的功能，我想知道按下了哪个按钮。我this.id用来查看按下的按钮的 ID。我想，因为我没有在 JavaScript 中检索按钮（例如button = document.getElementById('button')），所以它不起作用。我不知道如何使用在脚本中创建的 HTML 元素来做到这一点。

var paragraph = document.getElementById('paragraph');

var cabins = [1,2,3];

for (var i = 0; i < cabins.length; i++) {

  paragraph.innerHTML += "Cabin " + cabins[i] + "<br><br><button id='cabin" + cabins[i] +"' onclick='purchaseCabin()'>Purchase</button><br><br>"

}

function purchaseCabin() {

  var cabinId = this.id;

  console.log(cabinId);

}

<p id="paragraph"></p>html 按钮是用 JavaScript 创建的，每个按钮都有自己的 ID。它们在按下时激活相同的功能，我想知道按下了哪个按钮。我this.id用来查看按下的按钮的 ID。我想，因为我没有在 JavaScript 中检索按钮（例如button = document.getElementById('button')），所以它不起作用。我不知道如何使用在脚本中创建的 HTML 元素来做到这一点。

var paragraph = document.getElementById('paragraph');

var cabins = [1,2,3];

for (var i = 0; i < cabins.length; i++) {

  paragraph.innerHTML += "Cabin " + cabins[i] + "<br><br><button id='cabin" + cabins[i] +"' onclick='purchaseCabin()'>Purchase</button><br><br>"

}

function purchaseCabin() {

  var cabinId = this.id;

  console.log(cabinId);

}

<p id="paragraph"></p>

预期结果：按下按钮的 ID 写入控制台

实际结果：“undefined”写在控制台