Modification d'une page HTML non prise en compte

Version imprimable

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:

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:

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

01/07/2020, 17h23
SpaceFrog

du cache? => ctrl+F5

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:

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:

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?

02/07/2020, 16h33
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?

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

Code:

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

Voilà un exemple de ce que tu peux faire:

Code:

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:

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

03/07/2020, 09h30
mormic

Bonjour et merci JavaTwister pour cette solution qui fonctionne.
Mais, je dois le confesser, je n'ai pas tout compris au premier abord, surtout à cause de la syntaxe (class^ =>).
Chaque évolution de mon programme est pour moi des heures de recherches et d'essais, car je pense qu'il faut avant tout comprendre ce qu'on fait.
Là je suis à moitié satisfait car je ne sais toujours pas pourquoi ma première solution ne fonctionnait pas.
Je vais me remettre au travail pour comprendre complètement ta solution, puis je passerai à une nouvelle évolution de mon programme: mise en place de voyants sur la page HTML reflétant l'état des processus mis en fonction.
Bien cordialement
Michel
03/07/2020, 09h52
javatwister

Disons que tu demandais
if (tempo=="Poussoir"){} alors que l'attribut value de ton bouton valait "Poussoir ", avec un espace final;

Par ailleurs, tu t'emmêlais un peu les pinceaux avec trop de variables et paramètres inutiles;
Tu n'avais besoin que de this pour retrouver le numéro et le type de bouton;
num correspond au dernier caractère de l'id (0, 1, 2, 3...);
pou ne servait à rien: si c'est un poussoir, pou vaut 1, si c'est un interrupteur, pou vaut 0; autant chercher si l'élément contient le mot "Poussoir"; tu l'avais compris mais tu étais passé par un attribut "value" redondant. il suffisait de demander this.textContent... pour avoir le "contenu texte".

L'expression "[class^=button]" permet de récupérer les éléments dont la classe css commence par "button", ce qui correspond à tous les éléments "button ex1" ou "button ex2";

Merci pour ces explications claires.

Comme je suis un peu têtu, et, fort de tes conseils, je n'ai passé que this à ma fonction action tout en gardant ma solution initiale; ce qui donne:

Code:

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(btn) {
      // *******************toggle class***************
      var myButton = btn;
	  var bou = btn.textContent;
	  var num = bou.substr(bou.length-1,1);
      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 = "";
      if (bou.indexOf("Pou") >= 0) {
        msg = "/btn" + num + "/pou!";
      }
      else {
        msg = "/btn" + num + "/non!";
      }
      var xhr = new XMLHttpRequest();
      xhr.open("POST", "/");
      xhr.send(msg);
    }

Et cela fonctionne aussi parfaitement.

Merci encore pour tes précieux conseils