How to be less repetitive in my Javascript codes?

Asked

Viewed 106 times

1

This my code looks big and clumsy, is there any way to make it smaller? Something like "easier to write", or smaller?

Here’s my example, as you can see, I need to repeat this block 5 times, to display only one button at a time and its <div>, One for each button I press.

Am I right? That’s how it would be? 

function analysisShowPage1(){
    $('#page01').removeClass('btn-warning').addClass('btn-success');
    $('#page02').removeClass('btn-success').addClass('btn-warning');
    $('#page03').removeClass('btn-success').addClass('btn-warning');
    $('#page04').removeClass('btn-success').addClass('btn-warning');
    $('#page05').removeClass('btn-success').addClass('btn-warning');
    document.getElementById('analysisFullGraphContainer').style.display = 'block';
    document.getElementById('analysisFullGraphContainer2').style.display = 'none';
    document.getElementById('analysisFullGraphContainer3').style.display = 'none';
    document.getElementById('analysisFullGraphContainer4').style.display = 'none';
    document.getElementById('analysisFullGraphContainer5').style.display = 'none';
    document.getElementById('copyGraph01').style.display = 'block';
    document.getElementById('copyGraph02').style.display = 'none';
    document.getElementById('copyGraph03').style.display = 'none';
    document.getElementById('copyGraph04').style.display = 'none';
    document.getElementById('copyGraph05').style.display = 'none';
}
javascript html html5 encoding-style
  • 1

    Try to create a function that makes the command block, will save many lines of code

  • 1

    I was curious about the name of that function...analysisShowPage1. There is also the analysisShowPage2 and analysisShowPage3? That too is repetition...

2 answers

7


Repetitive code is not always bad. It can reduce it, but it can get harder to understand. The key to eliminating repetitions is to find a pattern and change what varies. It has several ways to achieve the goal.

As a minimal, compileable, verifiable example has not been done, I will make a code that probably works, but I have no way to test:

for (var i = 1; i < 6; i++) { 
    $('#page0' + i).removeClass('btn-warning').addClass(i == 1 ? 'btn-success' : 'btn-warning');
    document.getElementById('analysisFullGraphContainer' + i).style.display = i == 1 ? 'block' : 'none';
    document.getElementById('copyGraph0' + i).style.display = i == 1 ? 'block' : 'none';
}

I put in the Github for future reference.

  • Thanks for the code example! yes, it helps agent who is starting, to learn! I’ll play already! THANKS! And, if you have more examples I graduate!

  • 3

    Since here is a site of questions and objective answers, you have to ask very specific questions in order to formulate a specific answer. You can ask as many questions as you like, always providing as much information as possible to get the best answer you can provide.

  • Okay! I think I’m getting it! Thank you!

2

You can iterate everything within one for

This way:

function analysisShowPage1() {
  for (i = 1; i <= 5; i++) {
    $('#page' + i).removeClass('btn-warning').addClass('btn-success');
    document.getElementById('analysisFullGraphContainer' + i).style.display = 'block';
    document.getElementById('copyGraph' + i).style.display = 'block';
  }
}

I recommend only removing 0 from the variable name, the numeric type, assumes 01 as 1 for example.

Browser other questions tagged javascript html html5 encoding-style

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