icon-uri condiționate în html

[XAN77]

La prima încărcare a paginii ok, am înțeles, chestia e că de fiecare dată când dau refresh manual apare iconul half. Pot reduce cele 10 secunde la una singură nu e problemă.

Mulțumesc mult pentru atenția acordată, meritați o bere.

[Vizitator]

Acum 2 minute, x_dadu a spus:

Mulțumesc mult pentru atenția acordată, meritați o bere.

Nu scapi asa usor.
Acum este randul tau.
Prin analogie cu ce am postat, fa termometrul sa aiba culorea rosie daca sunt peste 25 de grade, si verde daca sub temperatura asta. 

 

[XAN77]

am făcut așa și merge, se schimbă culoarea.

<i class="fas fa-thermometer-half" id="id-color" style="color:#059e8a;"></i>
.
.
.
    if(this.responseText<=25)
        document.getElementById("id-color").setAttribute("style","color:#059e8a;");
    else
      document.getElementById("id-color").setAttribute("style","color:#ff3333;");

 

apoi am încercat ambele chestii cumulate, icon diferit și culoare diferită, dar nu mai merge, iconu se schimbă dar culoarea nu:

<i id="id-thermo" class="fas fa-thermometer-half" id="id-color" style="color:#059e8a;"></i
  .
  .
  .
    if(this.responseText<=25)
        {document.getElementById("id-thermo").setAttribute("class","fas fa-thermometer-half");
        document.getElementById("id-color").setAttribute("style","color:#059e8a;");}
    else
      {document.getElementById("id-thermo").setAttribute("class","fas fa-thermometer-full");
      document.getElementById("id-color").setAttribute("style","color:#ff3333;");}

 

[Liviu M]

Ești sigur că-ți trebuie 2 id-uri? 

[Vizitator]

Acum 10 minute, x_dadu a spus:

<i class="fas fa-thermometer-half" id="id-color" style="color:#059e8a;"></i>

Gresit. "id" se refara la tagul <i> nu la "class" sau la "style".
Pune doar id="id-thermo".

Si apoi: 

{
document.getElementById("id-thermo").setAttribute("class","fas fa-thermometer-half");
document.getElementById("id-thermo").setAttribute("style","color:#059e8a;");
}

 

[Vizitator]

Tema pentru viitor:
Culoarea sa se schimbe functie de temperatura. In pasi de 5 grade sa zicem. Fara if ... else !
Si iconita cu termometru se poate schimba fara prea multe if...else.
Vad ca exista si imagini cu diverse nivele de temperatura cu numele: fa-terhmometer-0 , fa-terhmometer-1 ... 4
Dar aici las pe tizul @Liviu M. Ca el iubeste optimizarile
LE: Si parca prea multe apelari de document.getElementById("id-thermo") . Nu ?

 

 

Editat Ianuarie 10, 2022 de Vizitator

[XAN77]

Acum merge, așa am crezut, că id-ul este pentru elementul ce urmează, nu pentru tagul i

Întradevăr sunt ceva apelări de getElementById, să înțeleg că e și un alt mod mai elegant !? Important e că funcționează.

 

[Liviu M]

Sorry, temele nu-mi plăceau nici la școală.

 

[Liviu M]

LE Mai ales ca de data asta haber n-am.

Sorry, uneori uneste mesajele, de data asta nu.

Editat Ianuarie 10, 2022 de Liviu M

[Vizitator]

1 oră în urmă, x_dadu a spus:

Întradevăr sunt ceva apelări de getElementById, să înțeleg că e și un alt mod mai elegant !?

Ceva mai elegant, codul ar fi asa:
 

var Tclass,Tstyle;
var Tid=document.getElementById("id-thermo");

if( ...)
{
	Tclass="fas fa-thermometer-full";
	Tstyle="color:red;"
}
else
{
	Tclass="fas fa-thermometer-half";
	Tstyle="color:green;"
}

Tid.setAttribute("class",Tclass);
Tid.setAttribute("style",Tstyle);

Eventual, pentru a nu pune browser la treaba degeaba, se poate testa daca a avut loc o schimbare de temperatura care sa presupuna actualizarea elementelor de pe ecran (icoana termometru sau culoare). Dar mergem prea departe.

Editat Ianuarie 10, 2022 de Vizitator