Sari la conținut
ELFORUM - Forumul electronistilor

icon-uri condiționate în html


x_dadu

Postări Recomandate

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.

Link spre comentariu
Distribuie pe alte site-uri

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;");}

 

Link spre comentariu
Distribuie pe alte site-uri

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;");
}


 

Link spre comentariu
Distribuie pe alte site-uri

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 de Liviu.Mihaiu
Link spre comentariu
Distribuie pe alte site-uri

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ă.

 

Link spre comentariu
Distribuie pe alte site-uri

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 de Liviu.Mihaiu
Link spre comentariu
Distribuie pe alte site-uri

Alătură-te conversației

Poți posta acum și să te înregistrezi mai târziu. Dacă ai un cont, autentifică-te acum pentru a posta cu contul tău.
Notă: Postarea ta va necesita aprobare moderator înainte de a fi vizibilă.

Vizitator
Răspunde la acest subiect...

×   Alipit ca text avansat.   Alipește ca text simplu

  Doar 75 emoji sunt permise.

×   Linkul tău a fost încorporat automat.   Afișează ca link în schimb

×   Conținutul tău precedent a fost resetat.   Curăță editor

×   Nu poți lipi imagini direct. Încarcă sau inserează imagini din URL.

×
×
  • Creează nouă...

Informații Importante

Am plasat cookie-uri pe dispozitivul tău pentru a îmbunătății navigarea pe acest site. Poți modifica setările cookie, altfel considerăm că ești de acord să continui.Termeni de Utilizare si Ghidări