I have two buttons next to the data that the screen will show for approve or deny I'm trying to figure out how to make it so when the user clicks approve the Status column changes from pending to approved and the same for deny. here's the JS part
let getAllbtn = document.getElementById("getAllbtn");
let Approve = document.getElementById("Approve");
let Deny = document.getElementById("Deny");
getAllbtn.addEventListener("click", getAllReimbursements);
Approve.addEventListener("click", approveReimb);
Deny.addEventListener("click", denyReimb);
and here's the html part
<body>
<button id="btn" id="getAllbtn">Get All Reimbursements</button>
<br>
<table class="table" id="table">
<thead>
<tr>
<th>Id</th>
<th>Amount</th>
<th>Submitted</th>
<th>Resolved</th>
<th>Description</th>
<th>AuthorId</th>
<th>ResolverId</th>
<th>Type</th>
<th>Status</th>
<th>Approve</th>
<th>Deny</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>1</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>hotel</td>
<td>2</td>
<td>1</td>
<td>TRAVEL</td>
<td>PENDING</td>
<td><button id="btn" id ="Approve">X</button></td>
<td><button id="btn" id ="Deny">X</button></td>
</tr>
</tbody>
</table>
You can simplify this alot by
data-attribute to set the statusclosest() along with querySelector to target the TD in questiondocument.querySelectorAll('.status-btn').forEach(button => {
button.addEventListener("click", e => {
e.target.closest('tr').querySelector('td.status').innerText = e.target.dataset.status;
});
});<table class="table" id="table">
<thead>
<tr>
<th>Id</th>
<th>Amount</th>
<th>Submitted</th>
<th>Resolved</th>
<th>Description</th>
<th>AuthorId</th>
<th>ResolverId</th>
<th>Type</th>
<th>Status</th>
<th>Approve</th>
<th>Deny</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>1</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>hotel</td>
<td>2</td>
<td>1</td>
<td>TRAVEL</td>
<td class='status'>PENDING</td>
<td><button class="btn status-btn" data-status="Approved">X</button></td>
<td><button class="btn status-btn" data-status="Denied">X</button></td>
</tr>
</tbody>
</table>