Javascript 按鈕 onClick 事件

Question

我正在嘗試將我的 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>

從瀏覽器的本地存儲中獲取數據后，我收到錯誤最大調用堆棧大小最終超出，如屏幕所示 我所理解的是它的發生是因為 function handleRemoveCard的默認執行。 我嘗試應用event.preventDefault ，這再次給我一個錯誤，例如未定義事件，因為我無法像這樣立即從 map 傳遞事件。

任何形式的幫助將不勝感激。

Answer 1

此行立即調用handleRemoveCard() 。 該行幾乎沒有意義，並導致無限遞歸調用：

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

看起來這就是你想要做的：

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

假設list.cardNumber實際上是一個數字而不是字符串或其他值，這將起作用。

我強烈建議您在創建元素后將事件附加到元素上，而不是使用屬性。 這就是所謂的“不顯眼的 JavaScript”。

Javascript 按鈕 onClick 事件

問題描述

1 個解決方案

解決方案1
0 已采納 2020-06-28 11:43:17

Javascript 按鈕 onClick 事件

問題描述

1 個解決方案

解決方案1 0 已采納 2020-06-28 11:43:17

解決方案1
0 已采納 2020-06-28 11:43:17