How to create a function to accept a parameter and increment it when called?

Question

I have created a function that accepts a variable as its parameter to increment and other to display it.

However, it only increments the passed parameter by 1.

var p1_score = 0;

function updateScores(playerDisplay, scoreFor){
    if (!gameOver) {
        scoreFor++;
        playerDisplay.textContent = scoreFor;
    }if (scoreFor === winningScore){
        playerDisplay.classList.add("winner");
        gameOver = true;
    }

Here is when I call it:

p1_button.addEventListener("click", function(){
    updateScores(p1_display, p1_score);
});

So when the button is clicked it does not increment p1_score more than 1.

Answer 1

You should receive it back. Something like

function updateScores(playerDisplay, scoreFor){
    if (!gameOver) {
        scoreFor++;
        playerDisplay.textContent = scoreFor;
    }if (scoreFor === winningScore){
        playerDisplay.classList.add("winner");
        gameOver = true;
    }
    return  scoreFor;
}

And then

p1_button.addEventListener("click", function(){
    p1_score = updateScores(p1_display, p1_score);
});

Or another solution is , simply declare it global.

   var scoreFor =0;
   function updateScores(playerDisplay, scoreFor){
        if (!gameOver) {
            scoreFor++;
            playerDisplay.textContent = scoreFor;
        }if (scoreFor === winningScore){
            playerDisplay.classList.add("winner");
            gameOver = true;
        }
    }

 p1_button.addEventListener("click", function(){
        updateScores(p1_display);
    });

Answer 2

You could take an object, because with the object, you hand over the object reference and not a primitive value, which does not change the outer variable.

function updateScores(playerDisplay, scoreFor) {
    if (!gameOver) {
        scoreFor.value++;
        playerDisplay.textContent = scoreFor.value;
    } else if (scoreFor.value === winningScore) { // assuming an else if
        playerDisplay.classList.add("winner");
        gameOver = true;
    }
}

var p1_score = { value: 0 }; // object with value

p1_button.addEventListener("click", function(){
    updateScores(p1_display, p1_score);
});

Answer 3

p1_score and scoreFor are two different variables. When you call the function, the first passes its value to the one inside the function. Since the value is a number (which is a primitive value ), the number is copied rather than passed using a reference. So incrementing scoreFor will not affect p1_score .

This is possible in some other languages such as C++ for example, where there is pointers and pass-by-reference.

Change the function to something like this:

function updateScores(playerDisplay, scoreFor){
    // ...
    return scoreFor;    // return scoreFor after it's been altered
}

and then use the function like this:

p1_score = updateScores(p1_display, p1_score);

Answer 4

You must declare scoreFor outside the function, I mean declare like a global variable and replace this: scoreFor++; with this: scoreFor = scoreFor + 1