javascript - Javascript 按钮 onClick 事件

问题描述

我正在尝试像下面这样放置我的 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的默认执行而发生的。我尝试应用event.preventDefault，这再次给了我一个错误，例如未定义事件，因为我无法像那样立即从地图中传递事件。

任何形式的帮助将不胜感激。

标签： javascripthtmlcssarraysobject

该线路立即呼叫 handleRemoveCard()。该行几乎没有意义，并导致无限递归调用：

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

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

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

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

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

javascript - Javascript 按钮 onClick 事件

问题描述

解决方案

推荐阅读