为什么我用这个JavaScript箭头函数获取不到被点击元素的属性？

Question

我正在用从对象数组中“提取”的数据填充 HTML 表：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(e)" class="btn btn-sm btn-success">Summary</button>             </td>      </tr>`;  }  document.querySelector("#parking tbody").innerHTML = results;}const showStatus = (car) => {  return car.isParked ? "In" : "Out";}

Answer 1

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

它说它无法target读取undefined。

因此，e是undefined。

因此，查看调用函数的位置：

onclick="changeStatus()"

您没有传递任何参数，因此e获取默认值undefined.

---

不要使用内部事件属性。他们有很多问题。

如果您添加一个事件处理程序，addEventListener那么它将获得一个事件对象作为第一个参数。

const buttons = document.querySelector(".btn-success");
for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", changeStatus);
}

---

考虑使用事件委托，而不是将事件处理程序分别绑定到每个按钮。

Answer 2

你得到 undefined 因为你没有传递事件对象。改变：

onclick="changeStatus()"

到：

onclick="changeStatus(event)"

另请注意，使用内联处理程序不是一个好的做法。如果您关心良好做法，请不要使用内联事件处理程序。而是选择 javascript 中的元素并将点击事件侦听器附加到它：

const btns = document.querySelectorAll('.btn')

btns.forEach(btn => btn.addEventListener("click", e => {

  let car = cars[btn.dataset.row];

  console.log(car);

}));

Answer 3

首先你必须传递一些东西来运行：

onclick="changeStatus(this)"

您的 THIS 此时表示“此元素”（此答案中的“此”太多了！）。

这意味着你没有 event.target，但是元素：

const changeStatus = (element) => {

  let car = cars[element.dataset.row];

  console.log(car);

}

工作代码：

https://jsfiddle.net/jmz37261/

顺便提一句。更好的选择是 addEventListener 而不是 onclick。

@编辑：

也许最好使用此解决方案（在这种特定情况下）：

<button data-row="${i}" onclick="changeStatus(${i})" class="btn btn-sm btn-success">Summary</button>

进而：

const changeStatus = (row) => {

  let car = cars[row];

  console.log(car);

}

Answer 4

问题出在您的按钮标签中：尝试替换onclick="changeStatus()"为onclick="changeStatus"

e您应该将函数的引用传递给按钮，这就是未设置事件（您的变量）的原因