創建的元素顯示爲未定義的對象

-1

我正在嘗試創建一個刪除按鈕以放入表格的最後一個單元格。但是當我嘗試它時，它會顯示對象定義（[object HTMLButtonElement]），而不是它應該生成的HTML元素。它是否必須以某種方式附加到表格行？由於我只是在循環中創建普通的HTML標籤，我該怎麼做？創建的元素顯示爲未定義的對象

當我在控制檯中嘗試該方法時，它會生成我期望的元素。

此外，它正在打開'表'標籤後添加「未定義」。似乎有點奇怪。

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

來源

2017-04-17 Cuckoo

初始化'staffList'，'VAR staffList = 「」;'！否則，你會在存儲在'staffList'中的HTML前加一個'undefined'。 –

嗨，剛剛嘗試過，仍然無法正常工作。 :( – Cuckoo

你正在混合文本創建和對象創建 - 你應該選擇你的毒藥，或者不要試圖將一個對象附加到一個字符串。「document.createElement（）'返回一個對象，你試圖將它添加到你可以使用'{{element}}。appendChild（）' – wizebin

你可以改變你的deleteStaffButton功能，或者你可以改變你的按鈕添加到您的表的方式。

最簡單的修改就是修改函數（但是你沒有直接添加函數的靈活性），所以它返回一個HTML字符串。

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

來源

2017-04-17 21:54:49 wizebin

嘗試使用字符串，因爲您解析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>" 
 

 
    } 
 
};

來源

2017-04-17 21:57:26 zer00ne

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

來源

2017-04-17 22:05:20 Andras

創建的元素顯示爲未定義的對象

回答

相關問題