Calling the name of the function and the variable added

Question

How can I add a variable to the function name? There will be several functions, which is why I created a counter that increments.After adding the counter, the newArea1 function is to be executed, then the newAre2 function, etc.I am asking you for help with this almost all day.Thank you in advance for your help.

    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 = 1;

//Investors
const InvestorNameArea = document.querySelector(".investor-name h2");
const InvestorPhotoArea = document.querySelector(".investor-image img");
const InvestorDealArea = document.querySelector(".investor-image p");
let InvestorName = ["Bill Gates", "Mark Zuckerberg"];
let InvestorPhoto = ["img/investors/billgates.jpg", "img/investors/markzuckerberg.jpg"];
let InvestorDeal = ["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!", "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 newArea2 = (totalpayment, nick, currentFunds) => {
        amountMoney.value = "";
        InvestorNameArea.innerHTML = InvestorName[1];
        InvestorPhotoArea.setAttribute("src", InvestorPhoto[1]);
        InvestorDealArea.innerHTML = InvestorDeal[1];
        currentFunds = totalpayment;
        winArea.style = "display: none";
        gameArea.style = "display: inline-block";
        area.style = "display: inline-block";
        sendBtn.addEventListener("click", function() {
            sendMoney(nick, currentFunds);
        });
    }

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 {
        newArea2(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 = InvestorName[0];
    InvestorPhotoArea.setAttribute("src", InvestorPhoto[0]);
    InvestorDealArea.innerHTML = InvestorDeal[0];
    counter++;
    winArea.style = "display: none";
    gameArea.style = "display: inline-block";
    area.style = "display: inline-block";
    sendBtn.addEventListener("click", function() {
        sendMoney(nick, currentFunds);
    });
}

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);

Please [edit] the question and replace the screenshots with actual code in plain text (the relevant parts, not all of it). You can then use `Ctrl-K` to format the code block. Also please give a better explanation of what you are trying to achieve, at the moment it isn't clear to me. — Peter B, Sep 02 '18 at 10:48
Hey @RafałPodraza, I suggest you go through this too in case you're using eval: https://stackoverflow.com/questions/86513/why-is-using-the-javascript-eval-function-a-bad-idea (Just going to help you if you're making something production level) — Sivcan Singh, Sep 02 '18 at 11:11

score 0 · Answer 1 · answered Sep 02 '18 at 11:13

Maybe this helps: Every function is also a method of the window object. in order to call a numbered function you may write: window["newArea"+counter]()

function newArea1(){
  return "this is newArea1 function";
}

function newArea2(){
  return "this is newArea2 function";
}

let counter = 1;

console.log(window["newArea"+counter]());

counter++;

console.log(window["newArea"+counter]())

Calling the name of the function and the variable added

1 Answers1