5568 sujets

Sémantique web et HTML

Barres de prpgression ajustables

bonjour
je veux gerer des valeurs de consignes de temperature sur une page web embarque dans un serveur Arduino . le souci est qu apres le codage je ne fais varier qu une seule valeur sur les quatres consignes et apres 3 heures de recherche je post ub appel au secour 

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>reglage consigne temperatures</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<body  style="       background-color: rgb(0, 204, 255);" >
<!-- Feuille de styles génériques -->
<link rel="stylesheet" href="../../styles.css" type="text/css">
</head>
<body>
<div id="wrap">

	<h3>Chauffage</h3>
	<p class="hint">Cliquez sur les boutons pour regler la temperature.</p>
	<p>Chambre 1
	
	<input type="button" onclick="modif(-0.1);" value=" - "><progress id="avancement1" 					value="19"max="22"></progress><span id="degre1"></span>
	<input type="button" onclick="modif(0.1);" value=" + ">
	
	</p>
	<p>Chambre 2
	<input type="button" onclick="modif(-0.1);"value=" - "><progress id="avancement2" 					value="19"max="22"></progress><span id="degre2"></span>
	<input type="button" onclick="modif(+0.1);" value=" + ">
	
	</p>
	<p>Chambre 3
	
	<input type="button" onclick="modif(-0.1);" value=" - "><progress id="avancement3" 					value="19"max="22"></progress><span id="degre3"></span>
	<input type="button" onclick="modif(0.1);" value=" + ">
	
	</p>
	<p>Salon&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
	<input type="button" onclick="modif(-0.1);"value=" - "><progress id="avancement4" 					value="19"max="22"></progress><span id="degre4"></span>
	<input type="button" onclick="modif(+0.1);" value=" + ">
	
	</p>
</div>

<script>
	function avancement(){
		var ava1 = document.getElementById("avancement1");
		var prc1 = document.getElementById("degre1");
		prc1.innerHTML = ava1.value + " &deg C ";
		var ava2 = document.getElementById("avancement2");
		var prc2 = document.getElementById("degre2");
		prc2.innerHTML = ava2.value + " &deg C ";
		var ava3 = document.getElementById("avancement3");
		var prc3 = document.getElementById("degre3");
		prc3.innerHTML = ava3.value + " &deg C ";
		var ava4 = document.getElementById("avancement4");
		var prc4 = document.getElementById("degre4");
		prc4.innerHTML = ava4.value + " &deg C ";
}
	avancement();

	function modif(val) {
		var ava1 = document.getElementById("avancement1");
		if((ava1.value+val)<=ava1.max && (ava1.value+val)>=13) {
			ava1.value += val;
	function modif(val) {
		var ava2 = document.getElementById("avancement2");
		if((ava2.value+val)<=ava2.max && (ava2.value+val)>=13) {
			ava2.value += val;
	function modif(val) {
		var ava3 = document.getElementById("avancement3");
		if((ava3.value+val)<=ava3.max && (ava3.value+val)>=13) {
			ava3.value += val;
	function modif(val) {
		var ava4 = document.getElementById("avancement4");
		if((ava4.value+val)<=ava4.max && (ava2.value+val)>=13) {
			ava2.value += val;
}}}}}}}	
		avancement();
}
</script>

</body>
</html>
[code=html]

Merci de votre aide et surtout des explication sur le pourquoi cela ne fonctionne pas que je puisse progresser Smiley cligne
Modifié par Pas (04 Nov 2017 - 23:22)
Je ne suis pas doué pour corriger le code des autres, mais déjà :
- toutes les fonctions function modif(val) s'incluent en poupées russes. Bizarre.
- ensuite il y a une erreur dans le copier/coller de la dernière fonction : il y a des ava4 mélangés avec des ava2.

Il existe des méthodes permettant d'éviter des copier/coller liés avec des identifiants (cf. l'opérateur this).
Pas a écrit :
je ne pense pas que cela fonctionne sur un arduino les this

L'opérateur this existe depuis la version 1 de javascript (comme pour tous langages c'est un des opérateurs les plus nécessaire). Sinon un Arduino n'est qu'un micro ordinateur dont on peut updater les languages, non ? (je n'y connais rien en Arduino).

Sinon, l'inclusion des fonctions en poupée russe, que j'avais souligné, me semblait plus problématique. Il faudrait commencer par là.
Modifié par Olivier C (06 Nov 2017 - 07:17)
Modérateur
Ce genre de déclaration est problématique:


if (qqch) {
  function truc(){
    // fait quelquechose
  }
}
else {
  function truc(){
    // fait autrechose
  }
}

- De manière classique, les fonctions déclarée avec function sont analysée avant toute éxecution du code, ce qui fait: qu'on peut appeler la fonction avant sa déclaration, que tous les blocs conditionnels sont ignorés et seule la dernière déclaration sera retenue.
- En mode strict, ce genre de déclaration était invalide.
- Depuis ES2015, en mode strict, c'est valide mais cela crée une fonction a portée locale au bloc.

Si on souhaite faire des fonctions conditionnelles il faut utiliser des expressions de fonctions (qui ne sont analysées que lors de l’exécution):


var truc;
if (qqch) {
  truc = function(){
    // fait quelquechose
  }
}
else {
  truc = function(){
    // fait autrechose
  }
}


De plus, les poupées russes qui réécrivent la fonction cela me parait très douteux.
kustolovic a écrit :
Ce genre de déclaration est problématique:


if (qqch) {
  function truc(){
    // fait quelquechose
  }
}
else {
  function truc(){
    // fait autrechose
  }
}

- De manière classique, les fonctions déclarée avec function sont analysée avant toute éxecution du code, ce qui fait: qu'on peut appeler la fonction avant sa déclaration, que tous les blocs conditionnels sont ignorés et seule la dernière déclaration sera retenue.
- En mode strict, ce genre de déclaration était invalide.
- Depuis ES2015, en mode strict, c'est valide mais cela crée une fonction a portée locale au bloc.

Si on souhaite faire des fonctions conditionnelles il faut utiliser des expressions de fonctions (qui ne sont analysées que lors de l’exécution):


var truc;
if (qqch) {
  truc = function(){
    // fait quelquechose
  }
}
else {
  truc = function(){
    // fait autrechose
  }
}


De plus, les poupées russes qui réécrivent la fonction cela me parait très douteux.

J ete parti pour essayer de m instruire et la j ai une reponse qui m embrouille encore plus pas cool Smiley decu
Sujet clos
Aller à