How can I decrease the size of this function?

Asked

Viewed 103 times

2

It’s a simple function, but it’s starting to turn into 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? No minifying Note: I don’t want to decrease the size in KB, but in lines.

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
  • 1

    It depends on the context of the page, looking so it is kind of difficult to understand what it does, but I would advise to fit a vector there, it would be much simpler

3 answers

11


Since there is a pattern in the code where all the if depend solely on qm, you could do it like 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";
}

  • Sergio, wouldn’t it be appropriate to validate if the element actually exists before changing its style? Avoiding possible errors.

  • 1

    @Mathiasfalci is a possibility, there are more optimizations as cache of the elements, but I remained only in the scope of the question.

  • 1

    Thank you very much Sergio, I was trying to do with vector, but fortunately it is not necessary to use it.

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>

1

You can validate with fewer lines still, restricting the variable qm 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>
  • 1

    Ai you are checking whether the parameter has been passed correctly, not whether the element exists in the DOM

  • @Felipeduarte No, I’m checking valid values. It seems to me that the elements are not dynamic, so, in my view, there is not much need to check whether there is in the DOM.

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.