首頁猿問為什么我用這個JavaScript...

為什么我用這個JavaScript箭頭函數獲取不到被點擊元素的屬性？

JavaScript

楊__羊羊 2023-05-19 14:50:30

我正在用從對象數組中“提取”的數據填充 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";}

查看完整描述

4 回答

白豬掌柜的

TA貢獻1893條經驗獲得超10個贊

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);
}

考慮使用事件委托，而不是將事件處理程序分別綁定到每個按鈕。

反對回復 2023-05-19

繁星coding

TA貢獻1797條經驗獲得超4個贊

你得到 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);

}));

反對回復 2023-05-19

絕地無雙

TA貢獻1946條經驗獲得超4個贊

首先你必須傳遞一些東西來運行：

onclick="changeStatus(this)"

您的 THIS 此時表示“此元素”（此答案中的“此”太多了?。?/p>

這意味著你沒有 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);

}

反對回復 2023-05-19

鴻蒙傳說

TA貢獻1865條經驗獲得超7個贊

問題出在您的按鈕標簽中：嘗試替換onclick="changeStatus()"為onclick="changeStatus"

e您應該將函數的引用傳遞給按鈕，這就是未設置事件（您的變量）的原因

反對回復 2023-05-19

4 回答
0 關注
227 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

為什么我用這個JavaScript箭頭函數獲取不到被點擊元素的屬性？

為什么我用這個JavaScript箭頭函數獲取不到被點擊元素的屬性？

4 回答

添加回答

為什么我用這個JavaScript箭頭函數獲取不到被點擊元素的屬性？

為什么我用這個JavaScript箭頭函數獲取不到被點擊元素的屬性？