Reduce code repetition with loop creation (loop)

Question

I want to save a few lines of code by creating a loop for or while to reduce what is below. I would assign a variable array for baixo_final[] getting baixo_final[i] for example and the variable i would go from 0 to 14

document.getElementById("baixo_final[0]").className = "baixo_final_2";
document.getElementById("baixo_final[1]").className = "baixo_final_2";
document.getElementById("baixo_final[2]").className = "baixo_final_2";
document.getElementById("baixo_final[3]").className = "baixo_final_2";
document.getElementById("baixo_final[4]").className = "baixo_final_2";
document.getElementById("baixo_final[5]").className = "baixo_final_2";
document.getElementById("baixo_final[6]").className = "baixo_final_2";
document.getElementById("baixo_final[7]").className = "baixo_final_2";
document.getElementById("baixo_final[8]").className = "baixo_final_2";
document.getElementById("baixo_final[9]").className = "baixo_final_2";
document.getElementById("baixo_final[10]").className = "baixo_final_2";
document.getElementById("baixo_final[11]").className = "baixo_final_2";
document.getElementById("baixo_final[12]").className = "baixo_final_2";
document.getElementById("baixo_final[13]").className = "baixo_final_2";
document.getElementById("baixo_final[14]").className = "baixo_final_2";

Answer 1

You can do so with Javascript:

for (var i = 0; i < 14; i++){
    document.getElementById("baixo_final[" + i + "]").className = "baixo_final_2";
   // ou somente `"baixo_final" + i + ""` caso não precises de "[]"
}

And you can approximate with CSS using div[id^="baixo_final"] which means that the ID "starts with" a given string. It’s less specific, but if it applies to your HTML it might be useful. In that case it would be like this (jsFiddle):

div[id^="baixo_final"] {
    padding: 10px;
    color: #0A8;
}

Example of the Javascript version:

for (var i = 0; i <= 14; i++) {
    document.getElementById("baixo_final[" + i + "]").className = "baixo_final_2";
}

.baixo_final_2 {
    padding: 10px;
    color: #0a5;
}

<div id="baixo_final[0]">0</div>
<div id="baixo_final[1]">1</div>
<div id="baixo_final[2]">2</div>
<div id="baixo_final[3]">3</div>
<div id="baixo_final[4]">4</div>
<div id="baixo_final[5]">5</div>
<div id="baixo_final[6]">6</div>
<div id="baixo_final[7]">7</div>
<div id="baixo_final[8]">8</div>
<div id="baixo_final[9]">9</div>
<div id="baixo_final[10]">10</div>
<div id="baixo_final[11]">11</div>
<div id="baixo_final[12]">12</div>
<div id="baixo_final[13]">13</div>
<div id="baixo_final[14]">14</div>

Answer 2

Just create the loop that will vary the numbers. The loop control variable will be used as part variable... (guess?) code variable, so everything that is repeated can be optimized:

for (var i = 0; i < 15; i++) document.getElementById("baixo_final[" + i + "]").className = "baixo_final_2";

Just for you to see the result:

    for (var i = 0; i < 15; i++) console.log('document.getElementById("baixo_final["' + i + '"]").className = "baixo_final_2";');

I put in the Github for future reference.

Answer 3

How about an alternative solution with the function Array.prototype.foreach():

var elementos = document.querySelectorAll("[id^='baixo_final']");

elementos.forEach(function(elemento) {
  elemento.classList.add("baixo_final_2");
});