计数器不良递增（Javascript）

Question

我有一个计数器的值，它没有像应该增加。这个计数器应该在每次调用 newArea 函数后递增。然而，在调用默认值上的第一个函数后，计数器变为了 2，但是在调用第二个函数后，计数器的值突然变成了 5。

以下是源代码。非常感谢您的帮助。

const home = document.querySelector("#home");
const nickName = document.querySelector(".nick-name");
const startBtn = document.querySelector(".startBtn");
const info = document.querySelector(".info");
let nickArea = document.querySelector(".nick-area");
let moneyArea = document.querySelector(".money-area");
const amountMoney = document.getElementById("amount-money");
const sendBtn = document.getElementById("send-money");
const infoWin = document.querySelector(".info-win");
const gameArea = document.getElementById("game-area");
const amoutWin = document.getElementById("amountwin");
let winArea = document.querySelector(".mywin");
const receive = document.getElementById("receive");
const area = document.querySelector(".area");
const endGameArea = document.getElementById("endgame");
const resetGame = document.getElementById("resetGame");
let currentFunds = 0;
let counter = 0;

//Investors
const InvestorNameArea = document.querySelector(".investor-name h2");
const InvestorPhotoArea = document.querySelector(".investor-image img");
const InvestorDealArea = document.querySelector(".investor-image p");
const Investors = [{name: "Bill Gates", photo: "img/investors/billgates.jpg", deal: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam fuga quae asperiores nemo veritatis, cumque, nihil minus hic adipisci, ut dolor alias amet obcaecati. In ipsa tenetur laboriosam impedit. Consequatur!"}, {name: "Mark Zuckerberg", photo: "img/investors/markzuckerberg.jpg", deal: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam fuga quae asperiores nemo veritatis, cumque, nihil minus hic adipisci, ut dolor alias amet obcaecati. In ipsa tenetur laboriosam impedit. Consequatur!"}, {name: "Google", photo: "img/investors/google.png", deal: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam fuga quae asperiores nemo veritatis, cumque, nihil minus hic adipisci, ut dolor alias amet obcaecati. In ipsa tenetur laboriosam impedit. Consequatur!"}, {name: "Steve Jobs", photo: "img/investors/stevejobs.jpg", deal: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam fuga quae asperiores nemo veritatis, cumque, nihil minus hic adipisci, ut dolor alias amet obcaecati. In ipsa tenetur laboriosam impedit. Consequatur!"}, {name: "Nokia", photo: "img/investors/nokia.jpg", deal: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam fuga quae asperiores nemo veritatis, cumque, nihil minus hic adipisci, ut dolor alias amet obcaecati. In ipsa tenetur laboriosam impedit. Consequatur!"}];

    const endGame = (totalpayment,nick,currentFunds,payment) => {
    document.getElementById("totalearnings").innerHTML = `Total Earnings: ${totalpayment}$`;
    gameArea.style = "display: none";
    endGameArea.style = "display: inline-block";

    resetGame.addEventListener("click", function() {
        currentFunds = 0;
        payment = 0;
        counter = 0;
        newArea(nick, currentFunds, payment);
    })
}


        const newArea6 = (totalpayment, nick, currentFunds, payment) => {
            endGame(totalpayment, nick, currentFunds, payment);
        }


    const paymentMoney = (nick, currentFunds, payment) => {
    winArea.style = "display: none";
    let totalpayment = currentFunds + payment;
    moneyArea.innerHTML = `Your money: ${totalpayment}$`;
    if(totalpayment == 0) {
    endGame(totalpayment, nick, currentFunds, payment);
    }
    else {
       newArea(totalpayment, nick, currentFunds, payment);
    }

}

const sendMoney = (nick, currentFunds) => {
    infoWin.style = "display: none";
    if(amountMoney.value > currentFunds || amountMoney.value < 1) {
        infoWin.innerHTML = "You do not have that much money!";
        infoWin.style = "display: inline-block";
    }

    else {
        infoWin.style = "display: none";
        currentFunds = currentFunds - amountMoney.value;
        moneyArea.innerHTML = `Your money: ${currentFunds}$`;
        let rate = (Math.random() * (0 - 2) + 2).toFixed(1);
        let payment = Math.round(amountMoney.value * rate);
        amoutWin.innerHTML = `Investment: ${payment}$`;
        winArea.style = "display: inline-block";
        area.style = "display: none";
        receive.addEventListener("click", function() {
            paymentMoney(nick, currentFunds, payment, winArea);
        });
    }
}

const newArea = (nick) => {
    endGameArea.style = "display: none";
    endGameArea.style = "display: none";
    amountMoney.value = "";
    currentFunds = 100000;
    nickArea.innerHTML = `Your name: ${nick}`;
    moneyArea.innerHTML = `Your money: ${currentFunds}$`;
    InvestorNameArea.innerHTML = Investors[counter].name;
    InvestorPhotoArea.setAttribute("src", Investors[counter].photo);
    InvestorDealArea.innerHTML = Investors[counter].deal;
    winArea.style = "display: none";
    gameArea.style = "display: inline-block";
    area.style = "display: inline-block";
    sendBtn.addEventListener("click", function() {
        sendMoney(nick, currentFunds);
        counter++;
        console.log(counter);
    });
}

const startGame = () => {
    if(nickName.value.length < 1) {
        info.innerHTML = "You must write your name!";
        info.style = "opacity: 1";
    }

    else if(nickName.value.length > 15) {
        info.innerHTML = "Your name is too long!";
        info.style = "opacity: 1";
    }

    else {
        const nick = nickName.value;
        home.classList.add("hide");
        endGameArea.classList.add("hide");
        newArea(nick);
    }
}
startBtn.addEventListener("click", startGame);

- Rafał Podraza

---

看起来你正在多次调用 newArea，而 newArea() 会为 sendBtn 上的点击事件添加一个新的事件监听器。添加的事件处理程序会堆叠在一起，它们不会替换现有的处理程序，因此当单击 sendBtn 时，将会执行多个回调函数，每个回调函数都会增加 counter 的值。 - Lennholm

这是我的问题 https://www.youtube.com/watch?v=ABqVwGLYUJg - Rafał Podraza

Answer 1

只有在点击 #send-money 按钮时，您的计数器变量才会增加：

sendBtn.addEventListener("click", function() {
    sendMoney(nick, currentFunds);
    counter++;
    console.log(counter);
});

然而，您已经将多个点击监听器附加到此按钮。因此，当您单击它时，计数器将增加多次：

const newArea = (nick) => {
    endGameArea.style = "display: none";
    endGameArea.style = "display: none";
    ...
    sendBtn.addEventListener("click", function() {
        ...
    });
}

因为 newArea 也被多次调用了。

希望这能帮到你。

- Martín Zaragoza

---

我尝试去改变它，但是我无法做到。 - Rafał Podraza