Yi, yo, so what I wanna do is to get the button "id" inside a function after triggering a event lisener, if that make sense. But since it is a set function I can't get the button "id" by the "this" syntax. The deleteMemberCallback(method) function is a "set" function which is suppose to call back the "id" of a table row. But to get the "id" of the row I need to know which button was pressed. If the deleteMemberCallback function had not had the set syntax, I could easy just have got the button "id" by calling "this.id", which is not possible it sems... If anyone have any clever ideas, I would be happy to hear them ;)
class UIHandler {
constructor() {
this.UIElement = createTable();
}
addMember(member){
console.log("Person added!");
let rowEl = this.UIElement.insertRow();
rowEl.id = member.id;
rowEl.insertCell().textContent = member.firstname;
rowEl.insertCell().textContent = member.lastname;
rowEl.insertCell().textContent = member.address;
rowEl.insertCell().textContent = member.phone;
//Adds delete button to row
let btnDel = document.createElement("button");
let delText = document.createTextNode("Delete");
btnDel.appendChild(delText);
btnDel.id = "b" + member.id;
rowEl.insertCell().appendChild(btnDel);
btnDel.addEventListener('click', this.deleteMemberCallback, false);
//Adds edit button to row
let btnEdit = document.createElement("button");
let editText = document.createTextNode("Edit");
btnEdit.appendChild(editText);
rowEl.insertCell().appendChild(btnEdit);
}
set deleteMemberCallback(method) {
method(this.id);
}
}
class AppController {
constructor(memberlist, addMember) {
this.memberlist = memberlist
this.addMember = addMember
}
run() {
this.ui = new UIHandler()
document.getElementById(this.memberlist).appendChild(this.ui.UIElement)
/*
* Code added temporarily to test that deleteMember works as intended.
*/
this.ui.addMember({"id":1,"firstname":"Ole","lastname":"Olsen","address":"Olsenbakken","phone":"91826453"})
this.ui.addMember({"id":2,"firstname":"Per","lastname":"Persen","address":"Persenbakken 77","phone":"14546567"})
this.ui.deleteMemberCallback = (id) => {
const doDelete = window.confirm(`Do you really want to delete member with id ${id}?`)
if (doDelete) {
window.alert(`Member ${id} should be deleted.`)
} else {
window.alert(`Member ${id} should not be deleted.`)
}
}
}
}
EDIT: I have tried:
btnDel.addEventListener('click', this.deleteMemberCallback.bind(btnDel), false);
btnDel.addEventListener('click', this.deleteMemberCallback.bind(this), false);
both failed -> "Cannot read property 'bind' of undefined"
Edit2: Ok, so I kind of miss interpreted this exercies. But anyway, I got get abit of help and got this solution. So I just removed the eventlistener form the buttons sinse those are not of use anymore...
set deleteMemberCallback(method) {
let buttons = document.getElementsByTagName("button");
for(let i = 0; i < buttons.length-1; i++) {
buttons[i].onclick = function(e) {
let tmp = buttons[i].parentNode.parentNode.id;
method(tmp);
}
}
}