Discussion :

[psylo24]

Bonsoir tout le monde,

Je me permet de vous solliciter car j'ai un petit probléme dans mon script :

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
25
26
27
28
29
for(var i = 0; i < document.images.length; i++){
        new_button = document.images[i].id;
        alert(new_button);
        //
 
        new_button.addEventListener("click", function () {
        alert("toto");
        //if red
        if ( new_button.alt === "off" ) {
                //use the function
                var new_status = change_pin ( 21, 'in');
        //        if (new_status !== "fail") {
                        new_button.alt = "on"
                        new_button.src = "data/img/green_0.jpg";
                        return 0;
          //              }
                }
        //if green
        if ( new_button.alt === "on" ) {
                //use the function
                var new_status = change_pin ( 21, 'out');
            //    if (new_status !== "fail") {
                        new_button.alt = "off"
                        new_button.src = "data/img/red_0.jpg";
                        return 0;
              //          }
                }
} );
}

J'ai bien une alterte avec l'id de mon bouton quand j’accède à la page, mais mon problème se situe à la ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

new_button.addEventListener("click", function () {

car en fait la valeur new_button doit contenir le nom de mon bouton or ce n'est pas le cas. (car je n'entre pas dans la boucle, je ne vois pas le message "toto"). Je veux que le nom soit chargé dynamiquement à chaque passage dans ma boucle.
Quand je remplace

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

new_button.addEventListener("click", function () {

par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

button_21.addEventListener("click", function () {

button_21 étant l'id de mon image, j'ai bien le message "toto"

Le but de mon script étant de parcourir les images (qui sont des boutons) et d'avoir une seule boucle au lieu d'avoir une pavasse de code JS pour chaque bouton.

Auriez vous une idée ?

[eleydet]

Bonsoir,

Avez-vous essayé ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
for(var i = 0; i < getElementsByTagName("IMG").length; i++){
        new_button = document.getElementsByTagName("IMG")[i];
        alert(new_button);
        //
 
        new_button.addEventListener("click", function () {
        alert("toto");
	...

et cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
new_button = [];
for(var i = 0; i < getElementsByTagName("IMG").length; i++){
        new_button[i] = document.getElementsByTagName("IMG")[i];
        alert(new_button[i]);
        //
 
        new_button[i].addEventListener("click", function () {
        alert("toto");
	...

[psylo24]

Merci beaucoup la première solution fonctionne

[NoSmoking]

Bonjour,
quand tu fais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
new_button = document.images[i].id;
alert(new_button);
 
new_button.addEventListener("click", function () {

tu essaies d'affecter à une string une méthode qu'elle ne possède pas, cela revient à écrire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

"id-de-mon-image".addEventListener("click", function () {

le script dans ce cas plante !

Par contre l'écriture de la fonction dans la boucle peut être améliorée en utilisant this, d'autres simplifications pourrait être faite mais ce n'est pas l'objet

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
var oImages = document.images;  // on pourrait cibler les images plus précisément ici
var i, nb = oImages.length;
 
for ( i = 0; i < nb; i += 1) {
 
    oImages[i].addEventListener('click', function () {
 
        if ( this.alt === 'off') {
            this.alt = 'on'
            this.src = 'data/img/green_0.jpg';
        }
 
        if (this.alt === 'on') {
            this.alt = 'off'
            this.src = 'data/img/red_0.jpg';
        }
    });
}

[psylo24]

Bonjour, finalement ce que je veux faire ca ne fonctionne pas,

Contexte : script permettant de changer l'état d'un GPIO de mon raspberri
Je créé un tableau en PHP avec mes boutons (dans mon exemple 21, 22 et 28)

Je veux que quand on clique sur un des boutons généré dynamiquement, ca fasse appel à ma fonction change_pin (en js). et que une fois l'état du pin changé alors également changer l'image du bouton

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<html>
 
 
	<body>
	<div id="divbut" name="divbut" onclick="DisplayFormValues();">
	<?php
	$gpios = array (21,22, 28);
	foreach($gpios as $gpio) {
        	//set the pin's mode to output and read them
		//echo ($status[$i]);
        	exec ("gpio read ".$gpio, $gpios[$gpio], $return );
 
		//echo "GPIO ".$gpio."";
		//echo "\n\n\n\n\n";
 
        	if ($gpios[$gpio][0] == 0 ) {
	        echo ("<img id='button_".$gpio."' src='data/img/red_0.jpg' alt='off'/>");
	        }
	        if ($gpios[$gpio][0] == 1 ) {
	        echo ("<img id='button_".$gpio."' src='data/img/green_0.jpg' alt='on'/>");
	        }
	     }
	?>
	</div>
<script>
 
function change_pin (pin, status) {
	//this is the http request
	var request = new XMLHttpRequest();
	request.open( "GET" , "gpio.php?pin=" + pin + "&status=" + status );
	request.send(null);
	//receiving information
	request.onreadystatechange = function () {
		if (request.readyState == 4 && request.status == 200) {
			return (parseInt(request.responseText));
		}
	//test if fail
		else if (request.readyState == 4 && request.status == 500) {
			alert ("server error");
			return ("fail");
		}
	//else 
		else { return ("fail"); }
	}
}
 
 
 
//var delimeter = '/';
//var string = 'part1/part2';
//var splitted = string.split(delimeter);
//alert(splitted[0]); 
 
 
 
var oImages = document.images;  // on pourrait cibler les images plus précisément ici
var i, nb = oImages.length;
 
for ( i = 0; i < nb; i += 1) {
 
    oImages[i].addEventListener('click', function () {
     alert(i);
        if ( this.alt === 'off') {
            this.alt = 'on'
            this.src = 'data/img/green_0.jpg';
        }
 
        if (this.alt === 'on') {
            this.alt = 'off'
            this.src = 'data/img/red_0.jpg';
        }
    });
}
 
 
 
 
 
</script>
 
 
 
 	</body>
</html>

Avec ce code quand je clique sur n'importe quel bouton i = 3, or je voudrais que quand je clique sur un bouton ca me fasse appel à ma fonction change_pi tout en récupérant l'ID du pin qui est égal au dernier (ou 2 derniers) chiffres d'lid de mon bouton ; ex : img qui a pour id=button_21 je dois récupérer ce qu'il y a aprés le _

Si je reprend mon code JS du début :

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
for(var i = 0; i < document.images.length; i++){
//	new_button = document.images[i].id;
 
new_button = document.getElementsByTagName("IMG")[i];
var x = document.getElementById("button_21");
alert(x.alt);
 
var delimeter = '_';
var splitted = new_button.id.split(delimeter);
//alert(splitted[1]); 
 
	new_button.addEventListener("click", function () {
	alert(splitted[1]);
 
 
 
        //if red
        if ( new_button.alt === "off" ) {
                //use the function
                var new_status = change_pin ( 21, 'in');
        //        if (new_status !== "fail") {
                        new_button.alt = "on"
                        new_button.src = "data/img/green_0.jpg";
                        return 0;
          //              }
                }
        //if green
        if ( new_button.alt === "on" ) {
                //use the function
                var new_status = change_pin ( 21, 'out');
            //    if (new_status !== "fail") {
                        new_button.alt = "off"
                        new_button.src = "data/img/red_0.jpg";
                        return 0;
              //          }
                }
} );
}

Quand je clique sur n'importe quel bouton la valeur affichée est 28 (et jamais 21 ou 22) => issue de ma commande : alert(splitted[1]); aprés la commande new_button.addEventListener("click", function () {

Par contre si je vais un avant la commande new_button.addEventListener("click", function () { alors le resultat est le bon j'ai bien un message avec le bon numéro quand je clique sur le bouton (si je clique sur le bouton qui a pour id button_21 j'ai un message "21").

Auriez vous une idée ?

[sekaijin]

...

Code php :

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
 
	$gpios = array (21,22, 28);
	foreach($gpios as $gpio) {
        	//set the pin's mode to output and read them
		//echo ($status[$i]);
        	exec ("gpio read ".$gpio, $gpios[$gpio], $return );
 
		//echo "GPIO ".$gpio."";
		//echo "\n\n\n\n\n";
 
        	if ($gpios[$gpio][0] == 0 ) {
	        echo ("<img id='button_".$gpio."' src='data/img/red_0.jpg' alt='off'/>");
	        }
	        if ($gpios[$gpio][0] == 1 ) {
	        echo ("<img id='button_".$gpio."' src='data/img/green_0.jpg' alt='on'/>");
	        }
	     }

...

Il y a u truc que je ne comprends pas dans ton code php $gpios est un tableau qui contient 21 22 et 23.
Or tu fais $gpios[$gpio][0] == 0 si j'interprète le code à la première itération de la boucle $gpio => 0 donc $gpios[$gpio] => $gpios[0] => 21 ce qui fait que $gpios[$gpio][0] => $gpios[0][0] => 21[0] et 21 n'est pas un tableau.

j'imagine que la commande exec modifie le tableau $gpios mais dans ce cas c'est pas top pour le foreach si exec modifie $gpios[$gpio] alors vaudrait mieux utiliser une autre variable (là tu as de la chance qu'il n'y ai pas d'effet de bord dans ta boucle).

quant au reste du code php un simple tableau et tu t'en sort sans code compliqué

Code php :

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
 
	$boutons = array(
		array("img" => "data/img/red_0.jpg",     "alt" => "off'", "status" => false),
		array("img" => "data/img/green_0.jpg", "alt" => "on'",  "status" => true),
        );
	$gpios = array (21,22, 28);
	foreach($gpios as $gpio) {
        	//set the pin's mode to output and read them
		//echo ($status[$i]);
        	exec ("gpio read ".$gpio, $gpios[$gpio], $return );
 
		//echo "GPIO ".$gpio."";
		//echo "\n\n\n\n\n";
 
	        echo ("<img id='button_".$gpio."' data-numero=".$gpio." data-status='".$boutons[$gpios[$gpio][0]].status." src='".$boutons[$gpios[$gpio][0]].img."' alt='".$boutons[$gpios[$gpio][0]].alt."'/>");
	     }

quant au javascript que de mélange !! j'avoue avoir du mal à suivre ta pensée.

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
(function() {
 //définition d'une fonction pour gérer tous les click sur les images
 var clickHandler = function () {
   alert(this.dataset.numero); //affiche le numéro de l'image
   change_pin(this);
 };
 
 //récupérer toutes les images
 var images = document.getElementsByTagName("IMG");
 //pour toutes les images
 for (var i=0; i < images.length; i++) {
  //affecter le gestionnaire de click à l'évé
  images[i].addEventListener("click", clickHandler);
 }
})();

enfin pour ta fonction change_pin, il y a un problème de conception
soit tu le gère avec une valeur de retour comme en C alors le type de retour doit toujours être le même.
ta fonction retourne un integer mais si ça plante elle retourne une string
si tu choisis cette voie tu dois retourner un integer en C par exemple tu a des fonction qui te retourne une valeur entre 0 et N si elle plante elle retourne -1
tu est donc homogène.

si tu préfère géré les erreur alors il te faut utilise les exception. si tout est Ok elle retourne un interger sinon elle lève une exception.

mais il y a surtout un problème c'est que tu fait un appel XHR donc ta fonction ne retourne rien
lorsque tu l'appelle elle prépare une requête au serveur et définie un fonction qui traitera la réponse.
elle envoie la requête et retourne rien.
puis la réponse arrive et la fonction traite la réponse et c'est elle qui contient un return or il n'y a aucun code pour récupérer cette valeur.

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
25
26
27
28
function change_pin (img) //on passe l'image en paramètre
{
  var pin = img.dataset.numero;
  var status = ! this.dataset.status; //change le status
  //this is the http request
  var request = new XMLHttpRequest();
  request.open( "GET" , "gpio.php?pin=" + pin + "&status=" + status );
  request.send(null);
  //receiving information
  request.onreadystatechange = function () {
    if (request.readyState == 4 && request.status == 200) {
      //je suppose que  gpio.php retourne 0 ou 1
      if (1== parseInt(request.responseText)) {
         //le status est true on le passe à false
         img.dataset.status = false;
         img.alt = 'off';
         img.src = 'data/img/red_0.jpg';
       } else {
         //le status est false on le passe à true
         img.dataset.status = true;
         img.alt = 'on';
         img.src = 'data/img/green_0.jpg';
      }
    } else {
      console.log (img.dataset.numero + " change status fail");
   }
  }
}

A+JYT
PS: je n'ai pas vérifié mon code. il faut probablement le débuger mais c'est pour le principe