'Hello I'm working with HTML and JavaScript trying to work on an approve/deny buttons

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>
javascripthtml


Solution 1:[1]

You can simplify this alot by

  1. setting a classname on the TD that you want to update (I gave it a class of 'status')
  2. making Approve and Deny use the same function which just reads a data-attribute to set the status
  3. use closest() along with querySelector to target the TD in question

document.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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kinglish

Related Questions