Comment changer la couleur d'une donnée selon son statuts

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
mykerinos1
Messages : 12
Enregistré le : 25 mai 2022, 07:57

Comment changer la couleur d'une donnée selon son statuts

Message par mykerinos1 » 14 juin 2022, 17:49

Bonjour.
je possède des données live de ma station météo que je récupère via web socket. Comment puis je modifier la couleur d'affichage de la donnee selon sa valeur ? par exemple bleu si il fait froid ou rouge si il fati très chaud.
Merci

Code : Tout sélectionner

 	 let socket = new WebSocket("ws://192.168.86.84:1880/endpoint/test");
 	//socket.onopen = function(e) {
 	// alert("[open] Connection etablie");
	//alert("Sending to server");
	//};

	socket.onclose = function(event) {
	if (event.wasClean) {
	alert(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`);
	} else {
	// par exemple : processus serveur arrêté ou réseau en panne
	// event.code est généralement 1006 dans ce cas
	alert('[close] Connection perdue. Rafraichissez la page');
	}
	};
	socket.onerror = function(error) {
	alert(`[error] ${error.message}`);
	};
	 socket.onmessage = function (event) {
	var data=JSON.parse(event.data) //pour transformer le retour texte en JSON

	var int=new Intl.NumberFormat("fr-FR", {maximumFractionDigits: 2, minimumFractionDigits: 2});

	var valtemp=(data["data"]["conditions"][0]["temp"]-32)*0.55;
	document.getElementById("temperature").innerHTML= int.format(valtemp);

	var valvent=data["data"]["conditions"][0]["wind_speed_last"]*1.609;
	document.getElementById("vent").innerHTML= int.format(valvent);

	document.getElementById("humidite").innerHTML=data["data"]["conditions"][0]["hum"];

	var valpress=data["data"]["conditions"][2]["bar_sea_level"]*33.8639;
	document.getElementById("pression").innerHTML= int.format(valpress);

	document.getElementById("pluie").innerHTML=data["data"]["conditions"][0]["rain_rate_last"];

	console.log (data);
	};

Avatar du membre
webmaster
Administrateur du site
Messages : 483
Enregistré le : 28 févr. 2017, 15:19

Re: Comment changer la couleur d'une donnée selon son statuts

Message par webmaster » 17 juin 2022, 11:37

Bonjour,

Il faut utiliser la propriété className pour ajouter une classe CSS avec une condition :

Code : Tout sélectionner

if (temp>25) {
  document.getElementById("temperature").className="chaud";
}
Bien sur, il faut configurer la classe .chaud avec une couleur rouge
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

mykerinos1
Messages : 12
Enregistré le : 25 mai 2022, 07:57

Re: Comment changer la couleur d'une donnée selon son statuts

Message par mykerinos1 » 24 juin 2022, 19:55

Bonsoir. Merci pour votre reponse. je n'ai pas obtenu de resultat. Voici mon code

Code : Tout sélectionner

	var valtemp=(data["data"]["conditions"][0]["temp"]-32)*0.55;
	document.getElementById("temperature").innerHTML= int.format(valtemp);
	if (temp>10) {
 	 document.getElementById("temperature").className="chaud";
} 
j'ai bien entendu créé mon css

Code : Tout sélectionner

	.chaud {
	color: red;
	}
Merci pour votre aide

Répondre