Reduce code repetition with looping

Question

Reduce code repetition with looping

Navigation

#1 by (7 votes)
#2 by (5 votes)
#3 by (0 votes)

2

I want to save a few lines of code by creating a for or while loop to reduce what's below. I would assign a variable array to baixo_final[] getting baixo_final[i] for example and the variable i would range 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";

javascript html css

asked by anonymous 07.01.2017 / 00:54

3 answers

5

Just create the loop that will vary the numbers. The loop control variable will be used as a variable of the variable part ... (guess?) 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";');
    }

07.01.2017 / 00:57

0

How about a workaround with the Array.prototype.forEach () :

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

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

07.01.2017 / 05:04

Comparison of char in C TypeError: $ (...) .error is not a function

score 7 · Accepted Answer

You can do this 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 approach 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 can be useful. In that case it would be like this ( jsFiddle ):

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

JavaScript version example:

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>