Javascript button onClick event

Question

I'm trying to put my onclick handler like the following.

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>

I'm getting the error Maximum call stack size exceeded in the end after getting the data from the browser's local storage as shown in the screen What I understood is its happening because of the default execution of the function handleRemoveCard . I tried applying event.preventDefault which is again giving me an error like event is not defined as I can't pass the event from the map right away like that.

Any kind of help would be appreciated.

Answer 1

This line is calling handleRemoveCard() immediately. The line makes very little sense, and is causing an infinite recursive call:

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

It looks like this is what you were trying to do:

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

This will work assuming that list.cardNumber is actually a number and not something like a string or other value.

I would strongly advise that you attach events to your elements after they are created instead of using using attributes. This is what's known as "unobtrusive JavaScript".

Javascript button onClick event

Question

1 answers

solution1
0 ACCPTED 2020-06-28 11:43:17

Javascript button onClick event

Question

1 answers

solution1 0 ACCPTED 2020-06-28 11:43:17

solution1
0 ACCPTED 2020-06-28 11:43:17