For cykly v JS

(kedy aký ako funguje pre html elementy?)

Iste si každý začiatočník všimol, že JS má viac možností pre "for cykly". V rámci ladenia kódu pre jeden môj projekt som sa na toto sústredil, aby som kód poriadne optimalizoval, sprehľadnil, no a po preštudovaní som zistil toto čo tu prezentujem:

Praktický test...
Mám 5 elementov, ktoré reagujú na klikanie. Každý obsahuje dajakú informáciu o farbe. Po kliknutí na konkrétny element, sa na všetkých zmení farba na takú, akú má on definovanú. Ten samotný element ale zostane v základnej farbe... Pracujem v tomto prípade s kolekciou objektov - "HTML Collection" (document.getElementBy), alebo s "NodeList" (document.query.Selector), to treba vedieť ako prvé. Ale for cykly takto podobne pracujú aj s klasickým poľom údajov.

Ako funguje ktorý výber elementov - getElementBy / querySelector (a veci z toho vyplývajúce), sa dozviete napríklad na tomto odkaze na Stackoverflow.

Pomocou klasického for cyklu, s indexom a dĺžkou poľa:

yellowgreenlightbluepinkred

kód k tomu je takto:

buttons1 = document.getElementsByClassName("test1");
(funguje aj: buttons1 = document.querySelectorAll(".test1");)
for (let i = 0; i < buttons1.length; i++ ) {
buttons1[i].onclick=changeColor;
}
function changeColor() {
for (let i=0; i < buttons1.length; i++) {
buttons1[i].style.backgroundColor=`${this.dataset.color}`
}
this.style.backgroundColor="brown" ; }

Zistenia:

Pomocou cyklu "for of":

yellowgreenlightbluepinkred

kód k tomu je takto:

buttons2 = document.getElementsByClassName("test2")
//buttons2 = document.querySelectorAll(".test2")
for (const button2 of buttons2) {
button2.onclick = changeColor2;
}
function changeColor2() {
for (const iterator of buttons2) {
iterator.style.backgroundColor = `${this.dataset.color}`
}
this.style.backgroundColor = "brown";
}

Zistenia:

Pomocou cyklu "for in":

yellowgreenlightbluepinkred

kód k tomu je takto:

buttons3 = document.getElementsByClassName("test3")
for (const btn3 in buttons3) {
buttons3[btn3].onclick = changeColor3;
}
function changeColor3() {
for (const button3 of buttons3) {
button3.style.backgroundColor = `${this.dataset.color}`
}
this.style.backgroundColor = "brown";
}

Zistenia:

Prečo robí "for in" problémy v danom prípade použitia?
Tento kód to ukáže:
for (const key in buttons3) {
console.log(key)
}

Výpis dopadne takto - máme tu zrazu 8 prvkov miesto 5...:

výpis

Pomocou cyklu "forEach":

yellowgreenlightbluepinkred

kód k tomu je takto:

buttons4 = document.querySelectorAll(".test4")
buttons4.forEach((button4) => button4.onclick = changeColor4);
function changeColor4() {
buttons4.forEach(button4 => button4.style.backgroundColor = `${this.dataset.color}`);
this.style.backgroundColor = "brown";
}

Zistenia:

© 2022 Daniel Gago