我的表单循环提交取决于我提交它的次数，即使没有循环语句 - js

Question

我们正在制作一个 JavaScript 银行应用程序，我有一个代码块来管理存款交易表格。与普通的银行应用程序一样，您需要多次使用存款交易，而这正是我们设计的目的。存款表格在模态内，问题是出于某种原因，它会根据我调用提交的次数循环提交。例如，如果我第一次存入 100，它只会存入 100。但是如果我打开模态并再次存入 100，它会调用该函数两次并存入 200。同样的事情发生在第三次 (100 x 3) ，等等等等。下面是我的事件侦听器代码块。

////////// DEPOSIT MODAL
if(depositModal) { // Checks for existence of depositModal (true in index.html, false in newuser.html)
    depositBts.addEventListener('click',function(){
        if(activeUser == undefined) { // Checks activeUser
            alert("Please enter a valid account number before trying a transaction!")
        } else {
            depositModal.classList.add('openDepositModal') // Opens deposit modal on click of deposit button
            let depositForm = document.getElementById('depositForm');

            depositForm.addEventListener('submit', function(e){
                let depositAmountInput = document.getElementById('depositAmountInput').value;
                activeUser.balance = parseInt(activeUser.balance) + parseInt(depositAmountInput);
                currentBalance.innerHTML = "PHP " + activeUser.balance.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
                console.log(activeUser)
                localStorage.setItem(activeUserKey, JSON.stringify(activeUser));
                alert(`Successfuly deposited PHP ${depositAmountInput}`);
                // depositForm.reset();
                depositModal.classList.remove('openDepositModal');
                e.preventDefault();
                })
        }
    }
)};

如有任何帮助，我们将不胜感激！

Answer 1

问题是每次 depositModal 的值改变时，您都会在 depositBtn 按钮上添加一个新的事件侦听器。

我相信单击按钮会切换您的模式。按钮上事件侦听器的数量取决于您切换模式的次数。

您应该只添加一次事件侦听器。在独立于处理 modal 的逻辑的地方。将它移到 if 语句之外就足够了..`

我的表单循环提交取决于我提交它的次数，即使没有循环语句 - js

My form loops its submit depending on how many times I've submitted it even if there is no looping statement - js

html

javascript

forms

modal-dialog