Ubuntu-fr

iznobe

[ resolu ] javascript soucis de codage

Bonjour , je me penche en ce moment sur un bout de code en javascript que je n' arrive pas a faire fonctionner , et ne comprends pas comment je devrais coder pour que ca fonctionne , voici le code qui ne fonctionne pas ( enfin il fonctionne mais ne fais pas ce que j' en attends )  :

const arr =[2, 3, 4, 5, 6, 7, 21, 22];
var length = arr.length;
for( var j = 0; j < length; j++ ) {
	var bouton_a = document.getElementById("button_"+j);
	bouton_a.indice=j;// ajout d’un indice à l’objet html
	bouton_a.addEventListener("click", function () {
		test_appui(this.indice);//Lorsqu'une fonction est utilisée comme gestionnaire d'événement (event handler), le this correspondant prendra la valeur de l'élément ayant déclenché l'événement
	} );
}

la variable j , devrait representée les valeurs du tableau , ce qui n' est pas le cas avec une boucle for je suppose , qui demarre a 0 et fini a n-1 nombre d ' elements , donc ici 7 au lieu de 22 comme j' aimerais .

je tente donc d ' utiliser une boucle "foreach" a la place , mais les exemples sur internet ne sont franchements pas trop bien fait . Apres j' avoue que je ne maitrise pas le javascript .

j ' ai tenté ca et pas mal d ' autre chose en me basant sur les examples trouvé ci et là qui semblaient a peu pres correspondre a ce que je cherche a faire , mais pas facile quand on n' y comprend rien :

foreach (arr.element => var j) {
	var bouton_a = document.getElementById("button_"+j);
	bouton_a.indice=j;// ajout d’un indice à l’objet html
	bouton_a.addEventListener("click", function () {
		test_appui(this.indice);//Lorsqu'une fonction est utilisée comme gestionnaire d'événement (event handler), le this correspondant prendra la valeur de l'élément ayant déclenché l'événement
	} );
	
}

et ca:

arr.foreach(j, this) {
var bouton_a = document.getElementById("button_"+j);
	bouton_a.indice=j;// ajout d’un indice à l’objet html
	bouton_a.addEventListener("click", function () {
		test_appui(this.indice);//Lorsqu'une fonction est utilisée comme gestionnaire d'événement (event handler), le this correspondant prendra la valeur de l'élément ayant déclenché l'événement
	} );
}

ne marche pas non plus .

le code php qui va avec :

	<?php		
			$bouton_array = [ 2 => "cuisine", 3 => "salle a manger", 4 => "salon", 5 => "salle TV", 6 => "salle de bains", 7 => "bureau", 21 => "chambre parents", 22 => "chambre lucie"];
				 
			
			foreach ($bouton_array as $i => $value) {
				
				$z==0;
				$z ++;
				
				if ($z % 9 == 0) {echo("<br />");}	//retour à la ligne après avoir affiché l'image numéro 8
				
				//lire l'état des sorties
				unset($status);//je détruis la variable pour remettre le tableau index à 0
				system("gpio mode ".$i." out");
				exec ("gpio read ".$i, $status);// si tableau déjà existant, exec rajoute une ligne dans tableau c'est la raison j'ai détruit cette variable.
				
				//si la sortie est à l'état 0 on affiche image rouge avec off
				if ($status[0] == 1 ) {
				    echo ("<img id='button_".$i."' src='data/img/green/".$value.".png' alt='on'/>");
				}
				//si la sortie est à l'état 1 on affiche image verte avec on
				elseif ($status[0] == 0 ) {
				    echo ("<img id='button_".$i."' src='data/img/red/".$value.".png' alt='off'/>");
				}
				else {} // on ne fait rien .
			}
		
	?> 

et le code source de la page obtenue :

<img id='button_2' src='data/img/green/cuisine.png' alt='on'/><img id='button_3' src='data/img/green/salle a manger.png' alt='on'/><img id='button_4' src='data/img/green/salon.png' alt='on'/><img id='button_5' src='data/img/green/salle TV.png' alt='on'/><img id='button_6' src='data/img/green/salle de bains.png' alt='on'/><img id='button_7' src='data/img/green/bureau.png' alt='on'/><img id='button_21' src='data/img/green/chambre parents.png' alt='on'/><img id='button_22' src='data/img/green/chambre lucie.png' alt='on'/> 

si quelqu un sait comment s ' y prendre pour avoir une boucle fonctionnelle , ca serait super de m' aiguiller .
D ' avance merci .

Dernière modification par iznobe (Le 18/06/2022, à 12:15)

---

retour COMPLET et utilisable de commande
MSI Z490A-pro , i7 10700 , 32 GB RAM .

MicP

Re : [ resolu ] javascript soucis de codage

Bonjour

… la variable j , devrait representée les valeurs du tableau , …

Si j'ai bien compris, tu voudrais que dans ta boucle for
la variable j prenne successivement la valeur de chacun des éléments contenus dans le tableau arr
donc :

const arr = [2, 3, 4, 5, 6, 7, 21, 22];

for (const j of arr) {
…

Dernière modification par MicP (Le 18/06/2022, à 11:59)

iznobe

Re : [ resolu ] javascript soucis de codage

Salut MicP , ca marche impec !

un grand merci a toi , ca fait deux demi-journées que je passe a chercher ....

c' est donc une boucle for ...of , et pas une boucle foreach qu ' il fallait utiliser .
je regarderais plus en detail les exemples a ce sujet .

Dernière modification par iznobe (Le 18/06/2022, à 12:18)

---

retour COMPLET et utilisable de commande
MSI Z490A-pro , i7 10700 , 32 GB RAM .

soshy

Re : [ resolu ] javascript soucis de codage

Sinon, tu peux aussi utiliser le style programmation fonctionnelle qui est un foreach

[2, 3, 4, 5, 6, 7, 21, 22].forEach((item, index) => {

    // ici item vaut successivement 2 3 4 5 6 7 21 et 22
    // et index 0 1 2 3 4 5 6 7
});

C'est dommage, t'étais pas si loin avec ton 3ème essai

Dernière modification par soshy (Le 18/06/2022, à 12:41)

MicP

Re : [ resolu ] javascript soucis de codage

Ah Ouiiiiii

avec la méthode forEach d'un tableau, en plus de l'item ça donne aussi un index

Dernière modification par MicP (Le 18/06/2022, à 13:05)

iznobe

Re : [ resolu ] javascript soucis de codage

@soshy , j ' avais vu cette page dans mes recherches , une des 1eres d' ailleurs .
mais avec la methode que tu proposes , je n' arrive pas a faire fonctionner le script .
je suis vraiment trop debutant avec le javascript ...

En tout cas merci pour votre aide

Dernière modification par iznobe (Le 18/06/2022, à 13:10)

---

retour COMPLET et utilisable de commande
MSI Z490A-pro , i7 10700 , 32 GB RAM .

MicP

Re : [ resolu ] javascript soucis de codage

Essaye comme ça :

[2, 3, 4, 5, 6, 7, 21, 22].forEach((item, index) => {
	var bouton_a = document.getElementById("button_" + j);
	bouton_a.indice = j; // ajout d’un indice à l’objet html
	bouton_a.addEventListener("click", function () {
		test_appui(this.indice); // Lorsqu'une fonction est utilisée comme gestionnaire d'événement (event handler), le this correspondant prendra la valeur de l'élément ayant déclenché l'événement
	});
});

Dernière modification par MicP (Le 18/06/2022, à 14:32)

iznobe

Re : [ resolu ] javascript soucis de codage

quelle est la difference avec la proposition de @soshy ?

---

retour COMPLET et utilisable de commande
MSI Z490A-pro , i7 10700 , 32 GB RAM .

MicP

Re : [ resolu ] javascript soucis de codage

C'est celle de soshy
étant donné que tu as écrit :

…avec la methode que tu proposes , je n' arrive pas a faire fonctionner le script . …

Dernière modification par MicP (Le 18/06/2022, à 19:39)

iznobe

Re : [ resolu ] javascript soucis de codage

Bonjour , comme je le disais , y a quelquechose qui fait que ca ne fonctionne pas , j ' ai tenté de remplacer aussi les variables j par item dans le reste du code , mais resultat identique .

c ' est juste pour information , vu que avec la methode que tu m' as proposé cela fonctionne .

Dernière modification par iznobe (Le 19/06/2022, à 07:04)

---

retour COMPLET et utilisable de commande
MSI Z490A-pro , i7 10700 , 32 GB RAM .

MicP

Re : [ resolu ] javascript soucis de codage

C'est assez frustrant, la méthode forEach des tableaux semblait tellement plus élégante,
mais bon, si ça fonctionne avec une boucle for, c'est déjà ça.