I have given quite a lot of input, already. Work up a couple of small side projects (similar to the demo I wrote for you above) and dig up the reading materials on events. Spend a week on the subject and dig for examples.
All the buttons in the cells (rows) need is one handler. Again, attach the listener to the parent object, and delegate. If you have two buttons on the row, then your handler will have two cases and respective callbacks.
const rowButtons = querySelector('#roster');
The id would go on the table
element, being it is the parent of all the table rows. Clicks in any of them will bubble up to the parent, which can then determine which button was clicked, check in or check out, and assign the handler.
The event has an eventObject with a this
property which is the context of the click event. (The row the button is in can be determined by traversing upwards to the nearest TR
.) Each row has sibling TD
’s and the one your event callbacks will be modifying will be the fourth, or last sibling in the group. Use a query selector to target that element then swap out the text node for that cell.
I still don’t feel comfortable having a static table with hardwired id attributes on the rows. When a member is added would be the time to add a row to the table, from a template (a script that composes the HTML and inserts the dynamic data, then appends it to the TBODY
as a new TR
.
This is not an exact version, but suggestive of what is needed in your template.
` <tr id="${this.memberId}">
<td><div class="name">${this.memberName}</div></td>
<td><div><button class="checkIn">Check In</button></div></td>
<td><div><button class="checkOut">Check Out</button></div></td>
<td><div class="bool">${this.isCheckedIn}</div></td>
</tr>`
These will be added to the handler cases to call (though not in their present form)
onclick="poolRoster[0].checkIn()"
onclick="poolRoster[0].checkOut()"
I’ll leave you to it to do some more research and experimentation that will help you get more familiar with events and dynamic construction of your page.