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
codice:
<!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>
Grazie a tutti quelli che saranno d'aiuto