Discussion :

[mormic]

Bonjour,

Je ne comprends pas le fonctionnement d'une page HTML qui vient d'�tre modifi�e.

Au d�part, une page HTML comporte 4 boutons d�finis ainsi:

Code HTML :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
<div>
<button class="button ex1" id="btn0" onclick= "action(0,this,0)">Interrupteur 1</button>
<button class="button ex1" id="btn1" onclick= "action(1,this,0)">Interrupteur 2</button>
<button class="button ex1" id="btn2" onclick= "action(2,this,0)">Interrupteur 3</button>
<button class="button ex1" id="btn3" onclick= "action(3,this,0)">Interrupteur 4</button>
</div>

A ce niveau tout va bien.

Le client d�sirant modifier la qualit� de btn2 par exemple, fait une demande au serveur qui lui envoie une page de configuration. Apr�s avoir modifi� la configuration, le client l'envoie au serveur qui en retour modifie la page HTML selon la demande. Ce qui donne par exemple:

Code HTML :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
<div>
<button class="button ex1" id="btn0" onclick= "action(0,this,0)">Interrupteur 1</button>
<button class="button ex1" id="btn1" onclick= "action(1,this,0)">Interrupteur 2</button>
<button class="button ex1" id="btn2" onclick= "action(2,this,1)">Poussoir 3</button>
<button class="button ex1" id="btn3" onclick= "action(3,this,0)">Interrupteur 4</button>
</div>

Donc, en appuyant sur btn2, la fonction "action" devrait recevoir en param�tre (2,this,1).

Or, et c'est l� mon probl�me, la fonction Javascript re�oit (2,this,0)!

Si quelqu'un a une id�e? Merci

[SpaceFrog]

du cache? => ctrl+F5

[mormic]

N'ayant pas de solution � ce probl�me incompr�hensible, j'ai trouv� une parade:
j'ai ajout� un tag value dans la d�finition de mon button; je l'adapte au moment de la modification de ma page

Code HTML :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
HTML:<div>
<button class="button ex1" id="btn0" value="Interrupteur " onclick= "action(0,this,0)">Interrupteur 1</button>
<button class="button ex1" id="btn1" value="Poussoir " onclick= "action(1,this,1)">Poussoir 2</button>
<button class="button ex1" id="btn2" value="Interrupteur " onclick= "action(2,this,0)">Interrupteur 3</button>
<button class="button ex1" id="btn3" value="Interrupteur " onclick= "action(3,this,0)">Interrupteur 4</button>
</div>

et maintenant il me suffit de lire par document.getElementById("btnx").value pour faire fonctionner correctement ma fonction.

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
JAVASCRIPT:var msg = "";
	  var tempo = document.getElementById("btn" + num).value;
      if (tempo=="Poussoir") {
        msg = "/btn" + num + "/pou!";
      }
      else {
        msg = "/btn" + num + "/non!";
      }
      var xhr = new XMLHttpRequest();
      xhr.open("POST", "/");
      xhr.send(msg);

Je ne sais pas si cela peut servir � quelqu'un?

[javatwister]

Le code que tu montres est incomplet donc on n'a aucune chance de trouver l'origine du probl�me, � part en jouant aux devinettes...
O� est ta fonction action(), avec les 3 arguments attendus?

[mormic]

La voici maintenant sachant qu'� l'origine c'est la variable pou que je testais et qui ne fonctionnait pas.

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function action(num, btn, pou) {
      // *******************toggle class***************
      var myButton = btn;
	  var myPou = pou;
      var className = " " + myButton.className + " ";
      if (~className.indexOf(" ex1 ")) {
        btn.className = className.replace(" ex1 ", " ex2 ");
      } 
      else {
        btn.className = className.replace(" ex2 ", " ex1 ");
      }
      // *******************fin toggle class***********
      var msg = "";
	  var tempo = document.getElementById("btn" + num).value;
      if (tempo=="Poussoir") {      /* if(pou) { */
        msg = "/btn" + num + "/pou!";
      }
      else {
        msg = "/btn" + num + "/non!";
      }
      var xhr = new XMLHttpRequest();
      xhr.open("POST", "/");
      xhr.send(msg);
    }

[javatwister]

Voil� un exemple de ce que tu peux faire:

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
<div>
<button class="button ex1" id="btn0">Interrupteur 1</button>
<button class="button ex1" id="btn1">Poussoir 2</button>
<button class="button ex1" id="btn2">Interrupteur 3</button>
<button class="button ex1" id="btn3">Interrupteur 4</button>
</div>

Code javascript :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
// Tu sélectionnes les boutons de la classe voulue
document.querySelectorAll("[class^=button]").forEach(v=>{
	// pour chaque bouton cliqué
	v.addEventListener("click",()=>{
		// tu toggles sa classe
		v.className=v.className.indexOf("ex1") ? "button ex2" : "button ex1";
		// tu construis ton message selon le numéro et le type du bouton
		const msg= v.textContent.indexOf("Poussoir")==-1 ?
		"/btn" + v.id.substring(3) + "/non!":
		"/btn" + v.id.substring(3) + "/pou!";
		// tu envoies ta requête
		const xhr = new XMLHttpRequest();
		xhr.open("POST", "/");
		xhr.send(msg);
	})
})