我试图将我的onclick处理程序设置为如下所示。
function handleFetch(cardList) {
let getList = cardList;
if(getList && typeof getList === "string") {
getList = JSON.parse(getList);
}
console.log("getList", getList);
if(cardList && cardList.length > 0) {
// if(getList.length > 0) {
cardListOut.innerHTML = getList.map((list, index) => {
return(
`<div id=id_index_${list.cardNumber}>
<div class=style_cardNumber>
${list.cardNumber}
</div>
<div class=style_cvv>
${list.cvv}
</div>
<div class=style_expiry>
${list.expiryDate}
</div>
<div>
<button type=button onclick=${handleRemoveCard(list.cardNumber)}>
Remove
</button>
</div>
</div>`
);
});
// }
}
}
function handleSubmit(event) {
console.log(event.target.id);
let isValidated = true;
if(cardNumberValue === '' || cvvValue === '' || expiryDateVal === '')
isValidated = false;
if(isValidated) {
handleStorage();
// handleFetch();
}
else {
invalidFields.innerHTML = "Fill up the fields correctly!";
}
}
const handleRemoveCard = (cardNumber) => {
cardNumber.preventDefault();
console.log("remove", cardNumber);
let getList = localStorage.getItem('cardList');
let getIndex = null;
if(getList) {
getList = JSON.parse(getList);
if(getList.length > 0) {
getList.map((item, index) => {
if(item.cardNumber === cardNumber) {
getIndex = index;
}
})
if(getIndex !== null) {
getList.splice(getIndex, 1);
}
handleFetch(getList);
}
}
}
my html code looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Payment Gateway Form</title>
</head>
<body onload="handleWindowOnload()">
<form onsubmit="handleSubmit(event)">
<div>
<button id="buttonId" type="submit" onclick="handleSubmit(event)">Save</button>
</div>
</div>
</form>
<div id="cardListOut">
</div>
</body>
<script type="text/javascript" src="index.js"></script>
</html>
任何形式的帮助都将不胜感激。
此行正在立即调用HandleRemoveCard()。 这一行几乎没有意义，并且导致了无限递归调用:
<button type=button onclick=${handleRemoveCard(list.cardNumber)}>
看起来这就是你想做的:
<button type=button onclick="handleRemoveCard(${list.cardNumber})">
假设list.cardNumber实际上是一个数字，而不是字符串或其他值，这将起作用。
我强烈建议您在创建元素后将事件附加到元素上，而不是使用using属性。 这就是所谓的“不引人注目的JavaScript”。
