Passing a value to a function on onclick from various "identical" buttons

Question

I am using this code to generate HTML showing a table of various members taken from a database, each having their own edit a delete button. I want each row to have a unique id that is equals to an id that each member has.

function showMembers(member){
       member.forEach(function(x){  
         let table = document.getElementById("memberTable")
         let rowCount = table.rows.lenght;
         let row = table.insertRow(rowCount);
         row.id=x.memberId
         let cell1 = row.insertCell(0);
         let cell2 = row.insertCell(1);
         let cell3 = row.insertCell(2);
         let cell4 = row.insertCell(3);
         row.insertCell(4).innerHTML = '<button type="button"> Edit </button>'
         row.insertCell(5).innerHTML = '<button type="button" id="deleteButton" onclick ="deleteMember(this)"> Delete </button>'
         document.getElementById("deleteButton").value=row.id
         cell2.innerHTML = x.lastname;
         cell3.innerHTML = x.address;
         cell4.innerHTML = x.phone;

      });}

When i click the delete button it will call this function that is located on a different javascript file

 function deleteMember(Id) {
            let url = config.servicesPath + "/member"
            const ajax = new AJAXConnection(url)
            ajax.onsuccess = viewMessage
            ajax.del([Id])
          }

How can i correctly pass the uique Id from each button over to the deleteMember function?

You cannot have multiple buttons with the same id `deleteButton` in a document. Better don't use `innerHTML` and create the button properly. — Bergi, Sep 16 '16 at 09:59
You have a typo in the line `let rowCount = table.rows.lenght;` - it should be `length`, not `lenght` — Zoli Szabó, Sep 16 '16 at 10:10
No you cant use JQuery. Its for a school assignment and we can only use normal javascript. — Sebastian Rojas Tveita, Sep 16 '16 at 10:14

score 0 · Answer 1 · edited May 23 '17 at 10:27

0

The simplest mode in you case would be to generate the onclick handler using the row.id directly:

row.insertCell(5).innerHTML = '<button type="button" id="deleteButton" onclick="deleteMember(' + row.id + ')"> Delete </button>'

Note: the above is a simple example that assumes row.id is numeric, else you will want to escape/serialize its value: How do I escape quotes in HTML attribute values?

edited May 23 '17 at 10:27

Community

1
1

answered Sep 16 '16 at 10:00

Zoli Szabó

4,366
1
13
19

1

That only works if `row.id` serialises to proper html and javascript. – Bergi Sep 16 '16 at 10:01
@Bergi `row.id` seems to be an integer, so I see no problem there. – Zoli Szabó Sep 16 '16 at 10:04
1

If it comes to this, it would be reasonable to generate unique IDs for each button as well: id="deleteButton-' + row.id + '" document.getElementById("deleteButton") might fail in case of 2+ buttons. – EternalLight Sep 16 '16 at 10:07
@ZoliSzabo Seems to? I don't see anything indicating that. Yes, for numbers it usually works, but it's still sloppy (and breaks as soon as the format of ids changes). – Bergi Sep 16 '16 at 10:12
The Id will always be a number so I dont think I have to worry about the format changing. And this is pretty much my first time using javascript so I can imagine there are better ways to do this that I dont know about – Sebastian Rojas Tveita Sep 16 '16 at 10:17
@Bergi I understood your concern and updated my answer accordingly. It seems that my answer helped the user, and I really doubt that the ID in this case will ever be altered to some format that would break this code. – Zoli Szabó Sep 16 '16 at 10:17
Thanks, though just escaping it in the first place would be better than a warning :-) Btw, a space between attribute name and equal sign is nothing but a stylistic issue. – Bergi Sep 16 '16 at 10:18

score 0 · Answer 2 · answered Sep 16 '16 at 10:16

I'd give the buttons a data attribute containing the row id and set the click handler to use that.

That would make the html look something like this:

<button onclick="deleteMember(this.getAttribute('data-rowid'))" class="delete-button" data-rowid="theid">delete</button>

Passing a value to a function on onclick from various "identical" buttons

2 Answers2