Buon giorno, sono nuovo del forum e di javascript.
Vi spiego subito il mio problema. Tramite un Arduino, a cui ho collegato dei sensori, invio una stringa di dati ad una pagina web(salvata sulla sd di arduino) contenente i valori dei sensori, e tramite una funzione sto cercando di colorare il testo numerico,in base al loro valore.
Quando avvio il tutto, e le variabili vengono inizializzate a zero, il colore è quello giusto(giallino),ma poi, quando vengono inviati i nuovi valori, la funzione non viene + richiamata e il colore non cambia.
Il codice l'ho scritto io, dopo qualche ora di lettura e esempi modificati trovati in giro per il web.
Ho provato ad usare il setTimeout e setInterval ma l'esito non è stato positivo.
Allego il codice nella speranza che qualcuno mi aiuti
Grazie a tutti quelli che saranno d'aiutocodice:<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $.fn.colorize = function () { return this.each(function() { var $this = $(this), number = $this.text(); $this.css({color: number < -5 ? "#02fdfe" : number <0 ? "#02c0fe" : number < 5 ? "#edf987" : number < 10 ? "#edf912" : "white"}); }); }; setInterval($.fn.colorize, 1000); function GetSwitchState() { //nocache = "&nocache=" + Math.random() * 1000000; var request = new XMLHttpRequest(); request.onreadystatechange = function() { if (this.readyState == 4) { if (this.status == 200) { if (this.responseText != null) { var stringa = this.responseText; var valori = stringa.split(" "); document.getElementById('placeholder-0').innerHTML = valori[0]; document.getElementById('placeholder-1').innerHTML = valori[1]; document.getElementById('placeholder-2').innerHTML = valori[2]; document.getElementById('placeholder-3').innerHTML = valori[3]; document.getElementById('placeholder-4').innerHTML = valori[4]; document.getElementById('placeholder-5').innerHTML = valori[5]; document.getElementById('placeholder-6').innerHTML = valori[6]; document.getElementById('placeholder-7').innerHTML = valori[7]; document.getElementById('placeholder-8').innerHTML = valori[8]; document.getElementById('placeholder-9').innerHTML = valori[9]; document.getElementById('placeholder-10').innerHTML = valori[10]; ........ (ho tagliato il codice perchè ripetitivo) } } } } //request.open("GET", "ajax_switch" + nocache, true); request.open("GET", "ajax_switch", true); request.send(null); setTimeout('GetSwitchState()', 10000); } </script> <head> <body onload="GetSwitchState()" bgcolor="black"> <h1 style="color: #5e9ca0;"><center>Situazione Meteo di Vigardolo</center></h1> <body> <div> <hr width=100% size=1 color=cc5500> <p><font color="white">Temperatura <span class="dfedo" id="placeholder-0"></span> C°</font></p> <p><font color="white">Temperatura <span class="dfedo" id="placeholder-1"></span> C°</font></p> <p><font color="white">Umidità Relativa <span class="dfedo" id="placeholder-2"></span> %</font></p> <p><font color="white">Pressione Atmosferica <span class="dfedo" id="placeholder-3"></span> hPa</font></p> <p><font color="white">Intensità Luminosa <span class="dfedo" id="placeholder-4"></span> nW/cm^2</font></p> <hr width=100% size=1 color=cc5500> <p><br></p> <table style="height: 139px; width: 1535px;"> <tbody> <tr> <td style="width: 200px;"><span style="color: #7fffd4;">Minime di oggi</span></td> <td style="width: 200px;"><span style="color: #fffacd;">Massime di oggi</span></td> <td style="width: 200px;"><span style="color: #00ffff;">Minime del mese</span></td> <td style="width: 200px;"><span style="color: #ffa500;">Massime del mese</span></td> <td style="width: 200px;"><span style="color: #0000ff;">Minime dell'anno</span></td> <td style="width: 200px;"><span style="color: #ff0000;">Massime dell'anno</span></td> </tr> <tr> <td style="width: 200px;"><font color="white"><span id="placeholder-5"></span> C° alle <span id="placeholder-6"></span></font></td> <td style="width: 200px;"><font color="white"><span id="placeholder-13"></span> C° alle <span id="placeholder-14"></span></font></td> <td style="width: 200px;"><font color="white"><span id="placeholder-7"></span> C° il <span id="placeholder-8"></span> alle <span id="placeholder-9"></span></font></td> <td style="width: 200px;"><font color="white"><span id="placeholder-15"></span> C° il <span id="placeholder-16"></span> alle <span id="placeholder-17"></span></font></td> <td style="width: 200px;"><font color="white"><span id="placeholder-10"></span> C° il <span id="placeholder-11"></span> alle <span id="placeholder-12"></span></font></td> <td style="width: 200px;"><font color="white"><span id="placeholder-18"></span> C° il <span id="placeholder-19"></span> alle <span id="placeholder-20"></span></font></td> </tr></tbody> </table> <script>$("div.dfedo").colorize();</script> <script>$("span.dfedo").colorize();</script> </body> </html>
Rispondi quotando
