How can I decrease the size of this function?

Question

How can I decrease the size of this function?

Navigation

#1 by (12 votes)
#2 by (5 votes)
#3 by (1 votes)

2

It's a simple function, but it's starting to turn a monster, the only thing that changes is the number at the end of each word. Does anyone have any tips on how to shorten this code? Without minify Note: I do not want to decrease the size in KB, but in rows.

function adc_atalho(qm){
    if (qm == 1 ) {
        document.getElementById("botaoAtalho1").style.display = "none";
        document.getElementById("botao1").style.display = "inline";
        document.getElementById("btRemover1").style.display = "inline";
    }

    else if (qm == 2) {
        document.getElementById("botaoAtalho2").style.display = "none";
        document.getElementById("botao2").style.display = "inline";
        document.getElementById("btRemover2").style.display = "inline";
    }

    else if (qm == 3) {
        document.getElementById("botaoAtalho3").style.display = "none";
        document.getElementById("botao3").style.display = "inline";
        document.getElementById("btRemover3").style.display = "inline";
    }

    else if (qm == 4) {
        document.getElementById("botaoAtalho4").style.display = "none";
        document.getElementById("botao4").style.display = "inline";
        document.getElementById("btRemover4").style.display = "inline"; 
    }

    else if (qm == 5) {
        document.getElementById("botaoAtalho5").style.display = "none";
        document.getElementById("botao5").style.display = "inline";
        document.getElementById("btRemover5").style.display = "inline"; 
    }

    else if (qm == 6) {
        document.getElementById("botaoAtalho6").style.display = "none";
        document.getElementById("botao6").style.display = "inline";
        document.getElementById("btRemover6").style.display = "inline"; 
    }
}

javascript html

asked by anonymous 26.09.2017 / 19:00

3 answers

5

If you want to validate before ...

function adc_atalho(qm){	
    var btnAtalho = document.getElementById("botaoAtalho" +qm );
    var btn = document.getElementById("botao" + qm);
    var btnRemover = document.getElementById("btRemover" + qm);
    
    if(btnAtalho) btnAtalho.style.display = "none";
    if(btn) btn.style.display = "inline";
    if(btnRemover) btnRemover.style.display = "inline";
}

adc_atalho(1);

<button id="botaoAtalho1">
atalho
</button>
<button id="botao1">
btn
</button>
<button id="btRemover1">
remover
</button>

26.09.2017 / 19:17

1

You can validate with fewer rows by restricting the qm variable within a set of values:

<script>
function adc_atalho(qm) {
    if(qm > 0 && qm <= 6){ // aqui eu restringo de 0 a 6 o valor de qm
        document.getElementById("botaoAtalho" + qm).style.display = "none";
        document.getElementById("botao" + qm).style.display = "inline";
        document.getElementById("btRemover" + qm).style.display = "inline";
    }
}
</script>

26.09.2017 / 19:30

Fibonacci sequence does not work [closed] How many "cases" are possible in a "switch"? [closed]

score 12 · Accepted Answer

Since there is a pattern in the code where all if depends only on qm , you could do this:

function adc_atalho(qm) {
    document.getElementById("botaoAtalho" + qm).style.display = "none";
    document.getElementById("botao" + qm).style.display = "inline";
    document.getElementById("btRemover" + qm).style.display = "inline";
}