时间戳

首页 > 解决方案 > 如何使用 JavaScript 检索同样在 JavaScript 中创建的 html 元素

javascript - 如何使用 JavaScript 检索同样在 JavaScript 中创建的 html 元素

问题描述

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”

标签： javascriptgetelementbyid

解决方案

this函数内部是指Window哪个不具有该属性id，因此您得到undefined：

将对象传递this给函数，以便您可以在函数内部引用它：

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(this)'>Purchase</button><br><br>"
}

function purchaseCabin(current) {
  //console.log(this.constructor.name); // Window
  var cabinId = current.id;
  console.log(cabinId);
}
<p id="paragraph"></p>

推荐阅读