Javascript 按钮 onClick 事件答案

【问题标题】：Javascript button onClick eventJavascript 按钮 onClick 事件
【发布时间】：2020-10-18 15:51:27
【问题描述】：

我正在尝试像下面这样放置我的 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>

在从浏览器的本地存储获取数据后，我得到错误Maximum call stack size exceeded，如屏幕所示我的理解是它的发生是因为函数 handleRemoveCard 的默认执行。我尝试应用 event.preventDefault 再次给我一个错误，如 event is not defined 因为我不能像那样立即从地图传递事件。 p>

我们将不胜感激。

【问题讨论】：

handleSubmit的功能是什么？你没有在问题中包含这个
@Sean 是的，刚刚添加。请检查。

标签： javascript html css arrays object

【解决方案1】：

这一行正在调用 handleRemoveCard() 立即。该行几乎没有意义，并导致无限递归调用：

<button type=button onclick=${handleRemoveCard(list.cardNumber)}>

看起来这就是你想要做的：

<button type=button onclick="handleRemoveCard(${list.cardNumber})">

假设list.cardNumber 实际上是一个数字而不是字符串或其他值，这将起作用。

我强烈建议您在创建元素后将事件附加到元素上，而不是使用属性。这就是所谓的“不显眼的 JavaScript”。

【讨论】：

是的，这就是我想要实现的目标。但同时我通过地图返回特定对象的按钮并显示在页面上。现在单独附加 onclick 将是另一种选择，但如果有可以提及的方法，请指定..