Jump to content
ELFORUM - Forumul electronistilor
x_dadu

icon-uri condiționate în html

Recommended Posts

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 to comment
Share on other sites

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. 

 

Link to comment
Share on other sites

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 to comment
Share on other sites

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 to comment
Share on other sites

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 ?

 


 

Edited by Liviu.Mihaiu
Link to comment
Share on other sites

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 to comment
Share on other sites

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.

Edited by Liviu.Mihaiu
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.Terms of Use si Guidelines