Fonction : Passer un élément d'array en paramètre Résolu/Fermé

Question

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);
}



Configuration: Boitier Be Quiet Silent Base 600 (silver)
Alimentation Corsair HX 650Watts - ATX12V
Carte mère Asus H97-Plus
Processeur Intel i5-4590 - 3.30 ghz 6M LGA1150
Barettes mémoire 2x Kingston DDR3 8G hyperx fury
Moniteur Samsung S22C450BWV-22IN
DD Western Digital - WD Black 1 To sata 6gb/s
Lecteur/graveur : Asus BW-16D1HT Blue-ray/dvd/cd 
Imprimante Canon Pixma IP5200R
Scanner  Epson Perfection V600 photo
Windows 7 professionnel

Utilisateur anonyme · Answer

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].

metalcat · Answer

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.jsvar 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';//

// création arraysarr_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';}// rootfor (var i=0; i<12; i++){generate_element_span(arr_rang[i], arr_text[i]);}

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

2 réponses

Discussions similaires