Javascript 按钮 onClick 事件

Question

I'm trying to put my onclick handler like the following.我正在尝试将我的 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>

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 .我所理解的是它的发生是因为 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.我尝试应用event.preventDefault ，这再次给我一个错误，例如未定义事件，因为我无法像这样立即从 map 传递事件。

Any kind of help would be appreciated.任何形式的帮助将不胜感激。

Answer 1

This line is calling handleRemoveCard() immediately.此行立即调用handleRemoveCard() 。 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.假设list.cardNumber实际上是一个数字而不是字符串或其他值，这将起作用。

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”。

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