Fonction : Passer un élément d'array en paramètre

Résolu/Fermé

metalcat Messages postés 75 Date d'inscription dimanche 23 novembre 2003 Statut Membre Dernière intervention 11 juin 2022 - Modifié par Chris 94 le 16/06/2016 à 19:11
metalcat Messages postés 75 Date d'inscription dimanche 23 novembre 2003 Statut Membre Dernière intervention 11 juin 2022 - 17 juin 2016 à 14:53

Bonjour,
Je voudrais passer un élément d'array à une fonction dans une petite routine en boucle qui crée des élément 'span' à partir de 2 arrays (arr_rang et arr_text). Les éléments 'span' devant contenir les évènements ONMOUSEOVER et ONMOUSEOUT.

Dans chaque fonction (onmouse_over et onmouse_out), le paramètre passé est signalé 'undefined' (test avec alert). J'ai beaucoup cherché sur internet mais je ne trouve pas d'exemple représentatif.

Merci pour votre aide.

la routine :

// generate elements span
for (i = 0; i < 12; i++){
span = document.createElement('span');
span.className='background_line';
span.textContent=arr_text[i];
span.onmouseover=function() {onmouse_over(arr_rang[i])};
span.onmouseout=function() {onmouse_out(arr_rang[i])};
document.getElementById('dossier31_douze').appendChild(span);
}

les 2 fonctions :

function onmouse_over(arr_rang_elem){
alert(arr_rang_elem);
elem = document.getElementById(arr_rang_elem);
elem.style.visibility='visible';
span.appendChild(elem);
elem1=document.getElementById('zero');
elem1.style.visibility='hidden';
span.appendChild(elem1);
}

var arr_rang_elem;
function onmouse_out(arr_rang_elem){
elem = document.getElementById(arr_rang_elem);
elem.style.visibility='hidden';
span.appendChild(elem);
elem1=document.getElementById('zero');
elem1.style.visibility='visible';
span.appendChild(elem1);
}

A voir également:

Fonction : Passer un élément d'array en paramètre
Fonction si et - Guide
Fonction moyenne excel - Guide
Fonction somme excel - Guide
Fonction trier excel - Guide
Fonction couleur excel - Guide

2 réponses

Réponse 1 / 2

Utilisateur anonyme
Modifié par le père. le 17/06/2016 à 00:36

Bonjour

C'est un problème de clôture (closure en anglais).
Quand tu appelles les fonctions onmouse_over(arr_rang[i]), ta boucle for est terminée et c'est toujours onmouse_over(arr_rang[12]) que tu appelles, et non pas onmouse_over(arr_rang[0]), onmouse_over(arr_rang[1])... comme tu le crois probablement. Et bien sûr, arr_rang[12] est 'undefined'.
Si tu as un doute, essaye :

span.onmouseover=function() {onmouse_over(i)};

pour bien visualiser i.

Regarde cet article :
https://developer.mozilla.org/fr/docs/Web/JavaScript/Closures

J'avais commencé à faire une correction, mais je tombe sur d'autres erreurs. Par exemple, ne devrait-il pas y avoir un

span.id=arr_rang[i];

lors de la création de tes span ?
Et la variable span utilisée dans tes 2 fonctions est la variable globale span créée dans ta boucle for, autrement dit elle désigne l'élément créé lors de la dernière boucle, celui dont l'id est arr_rang[11].

Réponse 2 / 2

metalcat Messages postés 75 Date d'inscription dimanche 23 novembre 2003 Statut Membre Dernière intervention 11 juin 2022 7
17 juin 2016 à 14:53

Bonjour le père,
Merci pour ta réponde. Je suis encore très limité en javascript. J'appréhendais dès le départ l'utilisation d'une boucle avec des évènements onmouseover et onmouseout. J'ai restructuré mon code en tenant compte de tes remarques et ça marche. Grand merci.

PS : En réponse à ta question : non, un span.id=arr_rang[i] n'est pas utile. Les élément de cette array correspondent à des 'id' de div renfermant des textes à afficher ou à cacher. Voir la page concernée sur mon site :
http://homeusers.brutele.be/offline.html

Le js au complet :


// dossier31.js

var div, span, elem, elem1;
div = document.getElementById('dossier31_douze');
div.style.marginTop='2%';
div.style.textAlign='center';
div.style.marginLeft='240px';
div.style.width='960px';

//<div style="margin-top:2%; text-align:center; margin-left:240px; width:960px;">

// création arrays
arr_rang = new Array('un','deux','trois','quatre','cinq','six','sept','huit','neuf','dix','onze','douze');

// octal : \240=espace, \047=', \077=?, \351=é, \340=à, \352=ê, \350=è
arr_text = new Array(
'\2401. Qui convoque l\047Assembl\351e g\351n\351rale \077\240',
'\2402. Qui \351tablit l\047ordre du jour \077',
'\2403. D\351lai de convocation \077',
'\2404. Comment convoquer \077',
'\2405. Quelle forme doit avoir la convocation \077',
'\2406. Combien de procuration un copropri\351taire peut-il accepter \077',
'\2407. Quel est le quorum de pr\351sence pour commencer l\047Assembl\351e \077',
'\2408. Qui pr\351side l\047Assembl\351e g\351n\351rale \077',
'\2409. Quelles sont les limitations du droit de vote \077',
'10. Comment r\351aliser le calcul des majorit\351s \077',
'11. Quel sont les majorit\351s \340 obtenir \077',
'12. Comment doit-\352tre r\351dig\351 le proc\350s verbal \077');

function generate_element_span(arr_rang_elem, arr_text_elem){
span = document.createElement('span');
span.className='background_line';
span.textContent=arr_text_elem;
span.onmouseover=function() {onmouse_over(arr_rang_elem)};
span.onmouseout=function() {onmouse_out(arr_rang_elem)};
document.getElementById('dossier31_douze').appendChild(span);
}

function onmouse_over(arr_rang_elem){
elem = document.getElementById(arr_rang_elem);
elem.style.visibility='visible';

elem1=document.getElementById('zero');
elem1.style.visibility='hidden';
}

function onmouse_out(arr_rang_elem){
elem = document.getElementById(arr_rang_elem);
elem.style.visibility='hidden';

elem1=document.getElementById('zero');
elem1.style.visibility='visible';
}

// root
for (var i=0; i<12; i++){
generate_element_span(arr_rang[i], arr_text[i]);
}

Discussions similaires

comment contourner la fonction FILTRE

Message "cette fonction n'est pas disponible actuellement"

Comment savoir comment on nous a ajouté sur Snap

Fonction MS-DOS non valide

Remplir une cellule (texte) en fonction d'une autre (texte).

Discussions similaires

Newsletters