Why my reusable function don't work, I do the logic without the variables and the function run correctly

Question

I'm new in code in general, I'm learning javascript, some days ago I make a "Path Checker", just for look what Can I do with my current knowledge, now 1 week later I'm try to improve it, less code, more reusable functions, but I don't know why Don't run correctly, the logic it's good alone, but with the variables dont' work.

This is the basic logic.

let moto1='';

function checkMoto1() {
    if (myMotosInTheGarage === 0 && moto1 === '') {
        openAlert(displaySorryAlert); //global function that works
    } else if (myMotosInTheGarage === 0 && moto1 === 'out') {
        moto1 = 'return';    //change status
        myMotosInTheGarage++; //sum to a count
        countMotos; //const of write the myMotosInTheGarage in a textContent
        changeBackground(btn1, 'red'//global function that works
    } else if (myMotosInTheGarage >= 0) {
        if (moto1 === '') {
            moto1 = 'out';
            myMotosInTheGarage--;
            countMotos;
            changeBackground(btn1, 'green');
        } else if (moto1 === 'out') {
            moto1 = 'return';
            myMotosInTheGarage++;
            countMotos;
            changeBackground(btn1, 'red');
        }
    }
}

And I try this to a global function.

let moto1='';

function checkMoto1() {
    checkMotoGarage(moto1, btn1);
};

function checkMotoGarage(motonumber, btnnumber) {
    if (myMotosInTheGarage === 0 && motonumber === '') {
        openAlert(displaySorryAlert);
    } else if (myMotosInTheGarage === 0 && motonumber === 'out') {
        motonumber = 'return';
        myMotosInTheGarage++;
        countMotos;
        changeBackground(btnnumber, 'red');
        console.log(`the ${btnnumber} it's ${motonumber}`);
    } else if (myMotosInTheGarage >= 0) {
        if (motonumber === '') {
            motonumber = 'out';
            myMotosInTheGarage--;
            countMotos;
            changeBackground(btnnumber, 'green');
            console.log(`the ${btnnumber} it's ${motonumber}`);
        } else if (motonumber === 'out') {
            motonumber = 'return';
            myMotosInTheGarage++;
            countMotos;
            changeBackground(btnnumber, 'red');
            console.log(`the ${btnnumber} it's ${motonumber}`);
        }
    }
};

The moto status don't change in the global function, Why is that? What I did wrong?.

Answer 1

Nowhere in the updated version of the code does this variable ever change:

let moto1='';

In the original working version the code updates that variable:

moto1 = 'return';

But in the new version you're only updating the local variable in that function, not the global variable:

motonumber = 'return';

If you want to maintain and update a global variable, you'll need to update that:

moto1 = 'return';

Alternatively you can return the value from the function (just remember to do everything else you need to do before returning) and assign/use the value wherever you call the function. But the function is already modifying other global variables so you may as well remain consistent with the patterns you're using.

Answer 2

I got it, you need to return a value, not a variable, and then change the variable with the new value outside the reusable function. I badly think you Can somehow change the value inside the reusable function, that whats my question, becouse in this case, you only Can have just one value of this function every time?, how to change the value inside instead? It's possible?

function checkMoto1() {
    moto1 = ckeckMotoGarage(moto1, btn1);
    console.log(moto1);
}
function ckeckMotoGarage(motoNumber, btnNumber) {
    if (myMotosInTheGarage >= 0 && motoNumber === '') {
        btnNumber.style.background = 'green';
        btn1.style.borderColor = 'green';
        return 'out';
    } else if (myMotosInTheGarage >= 0 && motoNumber === 'out') {
        btnNumber.style.background = 'red';
        btn1.style.borderColor = 'red';
        return 'return';
    }
}