Keep variable value between layers of a function

Question

I wanted to make a site where when I click on the image it doubles in size and width, but can do this only once, and if I do more, a warning appears preventing it. Similarly, if it is the default size, you cannot decrease it, and a warning will appear, but if you increase it and try to decrease it, this will be possible.

I stopped at the code around here:

function passar(img){
        var d = 0;
        if (d == 0){
        var x = confirm("tem certeza que deseja aumentar a imagem?");
        if(x == true && d ==0){
        d=d+1;
        img.height=img.height*2;
        img.width=img.width*2;
        }
        else if (x== true && d==1)
        window.alert("Não é possivel aumentar mais");
        else{
        var y = confirm("tem certeza que deseja diminuir a imagem?");
        if ( y==true && d==1){
        d=d-1;
        img.height=img.height/2;
        img.width=img.width/2;
        }
        else if(y == true && d==0)
        window.alert("Não é possivel");
        }}}

My biggest problem is being that when one if-else locks the key, the d does not possess the new value I gave it d=d+1 or d=d-1, I’ve tried other ways but I can’t find a solution.

Answer 1

Organizing the code always helps, it’s very easy to fool where each if close, it’s a nightmare to give maintenance in code so I lost several minutes to understand what you’re really doing and I have my doubts if I got it right. The name of the variables should be more significant. I did not check if the logic is correct.

In this case it is necessary to make the variable be considered from the instance of the function to its value maintained between executions. Also it should only boot if it has not been initialized, so we use a relational operator

function passar(img) {
    passar.contador = passar.contador || 0;
    if (passar.contador == 0) {
        var confirma = confirm("Tem certeza que deseja aumentar a imagem?");
        if (confirma && passar.contador == 0) {
            passar.contador++;
            img.height *= 2;
            img.width *= 2;
       } else if (confirma && passar.contador == 1) {
            window.alert("Não é possível aumentar mais");
        }
    } else {
        var confirma = confirm("Tem certeza que deseja diminuir a imagem?");
        if (confirma && passar.contador == 1) {
            passar.contador--;
            img.height /= 2;
            img.width /= 2;
        } else if (confirma && passar.contador == 0) {
            window.alert("Não é possível diminuir mais");
        }
    }
}
var img = {height : 10, width : 10};
passar(img);
passar(img);

I put in the Github for future reference.

I left as an accountant because in the future you may want to allow new scales, in the current form, nor need to be a numerical counter, since it only has two possible states.

Of course there are other solutions.