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

我正在用从对象数组中“提取”的数据填充 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";

}



杨__羊羊
浏览 178回答 4
4回答

白猪掌柜的

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); }考虑使用事件委托,而不是将事件处理程序分别绑定到每个按钮。

繁星coding

你得到 undefined 因为你没有传递事件对象。改变:onclick="changeStatus()"到:onclick="changeStatus(event)"另请注意,使用内联处理程序不是一个好的做法。如果您关心良好做法,请不要使用内联事件处理程序。而是选择 javascript 中的元素并将点击事件侦听器附加到它:const btns = document.querySelectorAll('.btn')btns.forEach(btn => btn.addEventListener("click", e => {&nbsp; let car = cars[btn.dataset.row];&nbsp; console.log(car);}));

绝地无双

首先你必须传递一些东西来运行:onclick="changeStatus(this)"您的 THIS 此时表示“此元素”(此答案中的“此”太多了!)。这意味着你没有 event.target,但是元素:const changeStatus = (element) => {&nbsp; let car = cars[element.dataset.row];&nbsp; 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) => {&nbsp; let car = cars[row];&nbsp; console.log(car);}

鸿蒙传说

问题出在您的按钮标签中:尝试替换onclick="changeStatus()"为onclick="changeStatus"e您应该将函数的引用传递给按钮,这就是未设置事件(您的变量)的原因
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript