创建的元素显示为未定义的对象

Question

我正在尝试创建一个删除按钮以放入我 table 的最后一个单元格中。但是当我尝试它时，它显示了对象定义 ([object HTMLButtonElement]) 而不是它应该生成的 HTML 元素。它是否必须以某种方式附加到 table 行？由于我只是在循环中创建普通的 HTML 标签，我该怎么做？

当我在控制台中尝试该方法时，它会按照我的预期生成元素。

此外，它会在 'table' 开始标记之后添加 "undefined"。似乎有点奇怪。

var view = {
  //It should be able to display staff
  displayStaff: function() {
    var staffTable = document.getElementById("staffInfo");

    staffTable.innerHTML = "";
    staffTable.innerHTML = "<table><tbody><tr><th>Staff Name</th><th>Phone Number</th><th>Staff Number</th><th>Department</th><th>Seniority</th><th>Email Address</th><th>Employment Status</th><th>Action</th></tr>"
    + this.listStaffProps() + "</tbody></table>";
  
  },
  listStaffProps: function() {
    var staffList;
    for (var props in rotaOb.staff) {
      staffList += "<tr><td>" + rotaOb.staff[props].staff_fName + " " + rotaOb.staff[props].staff_sName
      + "</td><td>" + rotaOb.staff[props].staff_pNumber
      + "</td><td>" + rotaOb.staff[props].staff_staffN
      + "</td><td>" + rotaOb.staff[props].staff_dept
      + "</td><td>" + rotaOb.staff[props].staff_seniority
      + "</td><td>" + rotaOb.staff[props].staff_sEmail
      + "</td><td>" + rotaOb.staff[props].staff_fullTime
      + "</td><td>" + this.deleteStaffButton()
      + "</td></tr>";
    };
    return staffList;
  },
  deleteStaffButton: function() {
    var deleteStaffButton = document.createElement("BUTTON");
    deleteStaffButton.textContent = "Delete";
    deleteStaffButton.className = "deleteStaffButton";
    return deleteStaffButton;
  }
};

Answer 1

您可以更改 deleteStaffButton 功能，也可以更改将按钮添加到 table 的方式。

最简单的更改是修改函数（但是您没有直接添加函数的灵活性）所以它 returns 一个 HTML 字符串。

deleteStaffButton: function() {
  return '<button class="deleteStaffButton">Delete</button>';
}

Answer 2

在解析 HTML 后尝试使用字符串。

var deleteStaffButton = "<button class='deleteStaffButton'>Delete</button>"

and add the var in:

 + "</td><td>" + deleteStaffButton

或简单地：

 + "</td><td><button class='deleteStaffButton'>Delete</button></td></tr>"

因为它不会改变。

片段

var view = {
  //It should be able to display staff
  displayStaff: function() {
    var staffTable = document.getElementById("staffInfo");

    staffTable.innerHTML = "";
    staffTable.innerHTML = "<table><tbody><tr><th>Staff Name</th><th>Phone Number</th><th>Staff Number</th><th>Department</th><th>Seniority</th><th>Email Address</th><th>Employment Status</th><th>Action</th></tr>"
    + this.listStaffProps() + "</tbody></table>";
  
  },
  listStaffProps: function() {
    var staffList;
    for (var props in rotaOb.staff) {
      staffList += "<tr><td>" + rotaOb.staff[props].staff_fName + " " + rotaOb.staff[props].staff_sName
      + "</td><td>" + rotaOb.staff[props].staff_pNumber
      + "</td><td>" + rotaOb.staff[props].staff_staffN
      + "</td><td>" + rotaOb.staff[props].staff_dept
      + "</td><td>" + rotaOb.staff[props].staff_seniority
      + "</td><td>" + rotaOb.staff[props].staff_sEmail
      + "</td><td>" + rotaOb.staff[props].staff_fullTime
      + "</td><td>" + deleteStaffButton
      + "</td></tr>";
    };
    return staffList;
  },
  var deleteStaffButton = "<button class='deleteStaffButton'>Delete</button>"

  }
};

Answer 3

var deleteStaffButton = document.createElement("BUTTON");
var text = deleteStaffButton.textContent = "Delete";
deleteStaffButton.appendChild(text);

创建的元素显示为未定义的对象

Createded Element Showing as undefined object

javascript

methods

createelement