[英]Counter is badly incrementing (Javascript)
我有一個計數器值,它不是應該增加的符號。 調用每個newArea函數后,此計數器應遞增。 但是,在從counter = 1上設置的默認值調用第一個函數后,counter = 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);
只有點擊#smand-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也被多次調用。
希望這可以幫助
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.