Why can’t I get the attribute of the clicked element with this JavaScript arrow function?

I am populating an HTML table with data "extracted" from an array of objects:

let cars = [{
    licensee: '23456 NY',
    arrival: new Date(2020, 9, 16, 11, 34, 30),
    leave: new Date(),
    isParked: true
  },
  {
    licensee: '56456 NY',
    arrival: new Date(2020, 8, 24, 10, 33, 30),
    leave: new Date(2020, 8, 24, 13, 50, 35),
    isParked: false

  },
  {
    licensee: '56780 NY',
    arrival: new Date(2020, 5, 12, 20, 33, 30),
    leave: new Date(2020, 5, 12, 21, 33, 30),
    isParked: false
  }
];

const formatDate = (date) => {
  var hours = date.getHours();
  var minutes = date.getMinutes();
  var ampm = hours >= 12 ? 'PM' : 'AM';
  hours = hours % 12;
  hours = hours ? hours : 12;
  minutes = minutes < 10 ? '0' + minutes : minutes;
  var strTime = hours + ':' + minutes + ' ' + ampm;
  return date.getDate() + "/" + (date.getMonth() + 1) + "/" + date.getFullYear() + " " + strTime;
}

const secondsToHours = (d) => {
  d = Number(d);
  let h = Math.ceil(d / 3600);
  return h;
}

const makeBill = (car) => {
  let arrivedAt = new Date(car.arrival).getTime();
  let leftAt = new Date(car.leave).getTime();
  //duration in seconds
  let duration = (leftAt - arrivedAt) / 1000;
  let hoursBilled = secondsToHours(duration);
  let billValue = car.isParked ? "-" : 10 + (hoursBilled - 1) * 5 + " LEI";
  return billValue;
}

const renterTable = () => {
  // Show new on top
  cars.reverse();

  let results = '';
  for (var i = 0; i < cars.length; i++) {
    results += `<tr>
          <td>${cars[i].licensee}</td>
          <td>${formatDate(cars[i].arrival)}</td>
          <td>${formatDate(cars[i].leave)}</td>
          <td class="text-center">${showStatus(cars[i])}</td>
          <td class="text-right">${makeBill(cars[i])}</td>
          <td class="text-right">
            <button data-row="${i}" onclick="changeStatus()" class="btn btn-sm btn-success">Summary</button>
             </td>
      </tr>`;
  }
  document.querySelector("#parking tbody").innerHTML = results;
}

const showStatus = (car) => {
  return car.isParked ? "In" : "Out";
}

const changeStatus = (e) => {
  let car = cars[e.target.dataset.row];
  console.log(car);
}

renterTable();
#parking th,
#parking td {
  white-space: nowrap;
  font-size: 14px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="table-responsive">
  <table id="parking" class="table table-striped m-0">
    <thead>
      <tr>
        <th>Registration plate</th>
        <th>Arrived</th>
        <th>Deaparted</th>
        <th>Status</th>
        <th class="text-right">Pay</th>
        <th class="text-right">Actions</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

This little function is intended to log the car corresponding to the clicked "Summary" button to the console:

const changeStatus = (e) => {
  let car = cars[e.target.dataset.row];
  console.log(car);
}

Yet, instead of the desired result, I get Cannot read property 'target' of undefined" .

Where is my mistake?



Read more here: https://stackoverflow.com/questions/64401071/why-cant-i-get-the-attribute-of-the-clicked-element-with-this-javascript-arrow

Content Attribution

This content was originally published by Razvan Zamfir at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: