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);
	})
})