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

Signaler
Messages postés
73
Date d'inscription
dimanche 23 novembre 2003
Statut
Membre
Dernière intervention
20 novembre 2020
-
Messages postés
73
Date d'inscription
dimanche 23 novembre 2003
Statut
Membre
Dernière intervention
20 novembre 2020
-
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);
}





 

2 réponses

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].
Messages postés
73
Date d'inscription
dimanche 23 novembre 2003
Statut
Membre
Dernière intervention
20 novembre 2020
7
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]);
}