1

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);
    }
  }
}
  • If anyone want more information, I would gladly give it to you – iIllumination Sep 07 '17 at 13:46
  • I'm not sure i really understand what you need, but it seem you need to bind the context to your function. https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/bind Read about `bind`, it may help you and if you doesn't know about it. It's useful to learn. – Nolyurn Sep 07 '17 at 13:51
  • I just want to get the id of the button I pressed when I call the deleteMemberCallback function. Which is triggered by a addEventListener – iIllumination Sep 07 '17 at 14:01
  • [This question](https://stackoverflow.com/a/37973399/2419531) might be more relevant than the one marked as duplicate. – Saravana Sep 07 '17 at 14:29
  • I give up, I can't find a solution on this right now, I guess I would try again in some days. Thanks for the help anyways guys! – iIllumination Sep 07 '17 at 14:41

0 Answers0