未定義オブジェクトとして表示されている要素

Question

私のテーブルの最後のセルに配置するための削除ボタンを作成しようとしています。しかし、試してみると、生成されるはずのHTML要素ではなく、オブジェクト定義（[object HTMLButtonElement]）が表示されます。それは何とかテーブルの行に追加する必要がありますか？私はループ内に通常のHTMLタグを作成しているだけなので、どうすればいいですか？

私はコンソールでメソッドを試してみると、それは私が期待するように要素を生成します。

また、「テーブル」タグの直後に「未定義」が追加されています。少し不思議そうだ。あなたのdeleteStaffButton機能を変更するか、またはあなたがあなたのテーブルにボタンを追加する方法を変更することができます

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

。

最も簡単な変更は、関数を変更することです（しかし、関数を直接追加する柔軟性はありません）ので、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);