Viser une étiquette

Le
Gloops
Bonjour tout le monde,

J'ai un jeu de boutons radio générés par une plateforme de
développement, qui sortent comme ceci (voici le premier) :

<td><input
id="ctl00_ContentPlaceHolder1_FormView2_GestCuisson1_RadioButtonList1_0=
"
type="radio"
name="ctl00$ContentPlaceHolder1$FormView2$GestCuisson1$RadioButtonList1=
"
value="P" /><label
for="ctl00_ContentPlaceHolder1_FormView2_GestCuisson1_RadioButtonList1_=
0">Par
paliers</label></td>


Il paraît douteux que je puisse beaucoup modifier le rendu, aussi je
modifie les propriétés en dynamique. Je souhaite exécuter une actio=
n au
passage de la souris, aussi au chargement de la page j'exécute ceci :

function charge(){
var radiobuttons =
document.getElementsByName("ctl00$ContentPlaceHolder1$FormView2$GestCuiss=
on1$RadioButtonList1");
radiobuttons[0].onmouseover=function(){alert('P');};
}

ça marche bien, mais seulement en passant la souris sur le bouton-radio=

lui-même. J'aimerais bien que l'action puisse s'exécuter aussi en
passant la souris sur son texte. Est-ce qu'on sait désigner cet élé=
ment
label ? Une boucle sur tous les éléments label, peut-être, avec un =
test
sur le texte ? Ou y a-t-il plus direct ?

J'ai essayé de passer par radiobuttons[0].parent, mais on me renvoie
null. Il semble qu'il n'ait pas non plus d'enfants, si j'en crois le
DOMexplorer de Firefox.
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Olivier Miakinen
Le #26276972
Bonjour,

Le 17/07/2014 10:32, Gloops a écrit :

[...] J'aimerais bien que l'action puisse s'exécuter aussi en
passant la souris sur son texte. Est-ce qu'on sait désigner cet élément
label ? Une boucle sur tous les éléments label, peut-être, avec un test
sur le texte ? Ou y a-t-il plus direct ?



À priori, je pense qu'il ne peut pas y avoir de méthode plus directe que
celle consistant à boucler sur tous les éléments label. En effet, un
label n'a aucun lien de parenté ou de filiation avec l'élément input
auquel il renvoie.

Cela dit, je peux me tromper, je suis très très loin d'être un gourou
HTML ou JavaScript. Mais bon, en attendant que les vrais gourous te
répondent, tu as toujours un avis sur la question.

Cordialement,
--
Olivier Miakinen
SAM
Le #26283072
Le 17/07/14 10:32, Gloops a écrit :
Bonjour tout le monde,

J'ai un jeu de boutons radio générés par une plateforme de
développement, qui sortent comme ceci (voici le premier) :

<td><input
id="ctl00_ContentPlaceHolder1_FormView2_GestCuisson1_RadioButtonList1_0"
type="radio"
name="ctl00$ContentPlaceHolder1$FormView2$GestCuisson1$RadioButtonList1"
value="P" /><label
for="ctl00_ContentPlaceHolder1_FormView2_GestCuisson1_RadioButtonList1_0">Par
paliers</label></td>


Il paraît douteux que je puisse beaucoup modifier le rendu, aussi je
modifie les propriétés en dynamique. Je souhaite exécuter une action au
passage de la souris



alors, au lieu de le faire au passage sur le bouton on va tenter de le
faire sur la cellule qui le contient ainsi que le label associé :

function survol() {
var bouton, texto,
el = this.parentNode;
while(el.tagName != 'TD') el = el.parentNode; // la cellule contenante
el.onmouseover = change; // on y accroche un événement mouseOver
el.onmouseout = change; // idem pour mouseOut (googler: js+toggle )
}

function change() {
var bouton = this.getElementsByTagName('INPUT')[0],
texto = this.getElementsByTagName('LABEL')[0],
classe = this.className;
this.className = (!classe||classe=='')? 'vu' : '';
alert(bouton.id + 'n' + texto.innerHTML + 'nclasse = ['+classe+']');
}

function charge() {
var r =
document.getElementsByName("ctl00$ContentPlaceHolder1$FormView2$GestCuisson1$RadioButtonList1"),
z = r.length;
if(r && r.length>0) while(z--) { r[z] = survol; }
else alert('erreur');
}

onload = charge;


(snip)

J'ai essayé de passer par radiobuttons[0].parent, mais on me renvoie
null.



le parent est : radiobuttons[0].parentNode;

Il faut ensuite s'assurer qu'on est bien dans le parent voulu ou sinon
le grand-parent voulu.

Il semble qu'il n'ait pas non plus d'enfants, si j'en crois le
DOMexplorer de Firefox.



?? connais pas ...

les enfants : radiobuttons[0].childNodes;

Le bouton-radio n'a pas d'enfant, normal que childNodes renvoie 'null'

var b = document.getElementsByTagName('input'), z = b.length; n =0;
if(b && b.length>0) {



https://developer.mozilla.org/fr/docs/DOM/element.parentNode
https://developer.mozilla.org/fr/docs/DOM/element.childNodes

Ha! pour les formulaires on peut aussi utiliser le JavaScript de nos
grand' mères :
- soit directement les radios par leur nom commun :
https://developer.mozilla.org/fr/docs/DOM/element.name
- soit la collection des éléments du formulaire :
https://developer.mozilla.org/fr/docs/DOM/form
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-40002357



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Gloops
Le #26285162
SAM a écrit, le 19/07/2014 00:20 :
J'ai essayé de passer par radiobuttons[0].parent, mais on me renvoie
null.



le parent est : radiobuttons[0].parentNode;



Ah, ben je sis un peu perdu avec ta fonction survol, pour être honnêt e,
mais ça je vais regarder.


Il faut ensuite s'assurer qu'on est bien dans le parent voulu ou sinon
le grand-parent voulu.

Il semble qu'il n'ait pas non plus d'enfants, si j'en crois le
DOMexplorer de Firefox.



?? connais pas ...

les enfants : radiobuttons[0].childNodes;



Ah ben ... Pareil.
J'avais regardé childs et children ...

On attend un peu pour le bonnet d'âne ?

https://developer.mozilla.org/fr/docs/DOM/element.parentNode
https://developer.mozilla.org/fr/docs/DOM/element.childNodes

Ha! pour les formulaires on peut aussi utiliser le JavaScript de nos
grand' mères :
- soit directement les radios par leur nom commun :
https://developer.mozilla.org/fr/docs/DOM/element.name
- soit la collection des éléments du formulaire :
https://developer.mozilla.org/fr/docs/DOM/form
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-40002357



Oh mais ... on dirait bien que voilà de la lecture :)

Merci.


--
Gloops
Le #26285152
Olivier Miakinen a écrit, le 17/07/2014 21:21 :
Cela dit, je peux me tromper, je suis très très loin d'être un go urou
HTML ou JavaScript. Mais bon, en attendant que les vrais gourous te
répondent, tu as toujours un avis sur la question.




Merci :)

On dirait que j'ai de quoi faire après ce qu'a dit SAM.
Olivier Miakinen
Le #26288032
Le 19/07/2014 19:58, Gloops a écrit :

Cela dit, je peux me tromper, je suis très très loin d'être un gourou
HTML ou JavaScript. Mais bon, en attendant que les vrais gourous te
répondent, tu as toujours un avis sur la question.



Merci :)

On dirait que j'ai de quoi faire après ce qu'a dit SAM.



C'est bien SAM qui est à lui tout seul « les vrais gourous du
JavaScript » :-D
Gloops
Le #26290372
Bonjour,

Dans la fonction survol, le mot-clef this a été irremplaçable, sans ça
j'étais mal barré.

Voilà ce que ça donne (je ne suis pas trop inquiet pour ce qui est de
mettre le bon texte dans une étiquette fixe en bas en fonction de la
valeur de repere) :

var radios =
document.getElementsByName("ctl00$ContentPlaceHolder1$FormView2$GestCuiss on1$RadioButtonList1");

for(var n = 0; n< radios.length; n++) // il n'y a pas un foreach ?
{
var elt = radios[n];
elt.onmouseover=function() {gereSurvolCuisson(this);} // bout on
elt.parentNode.childNodes[1].onmouseover = elt.onmouseover;// ét iquette
}

function gereSurvolCuisson(object)
{
if (object.value)
{
repere = object.value;
}
else
{
repere = object.parentNode.childNodes[0].value;
}
alert(repere);
}
SAM
Le #26303607
Le 22/07/14 00:56, Gloops a écrit :
Bonjour,

Dans la fonction survol, le mot-clef this a été irremplaçable, sans ça
j'étais mal barré.

Voilà ce que ça donne (je ne suis pas trop inquiet pour ce qui est de
mettre le bon texte dans une étiquette fixe en bas en fonction de la
valeur de repere) :

var radios > document.getElementsByName("ctl00$ContentPlaceHolder1$FormView2$GestCuisson1$RadioButtonList1");


for(var n = 0; n< radios.length; n++) // il n'y a pas un foreach ?



Non, pas en JS "normal" (ça existe, je crois, dans la bibli jquery)

Mébon ... le if n'est pas si compliqué / fastidieux, non ?
Sinon il y a le while ...

Pour le "for" il vaut mieux :
for(var n = 0, z = radios.length; n<z; n++)
afin déviter de refair calculer le radio.length à chaque boucle

pour le "while" :
var n = radios.length;
while( n-- )

{
var elt = radios[n];
elt.onmouseover=function() {gereSurvolCuisson(this);} // bouton



ou plus simplement :
elt.onmouseover = gereSurvolCuisson;

elt.parentNode.childNodes[1].onmouseover = elt.onmouseover;//
étiquette
}

function gereSurvolCuisson(object)
{
if (object.value)
{
repere = object.value;
}
else
{
repere = object.parentNode.childNodes[0].value;



Là ce n'est pas prudent ...
Il se peut que "certain" navigateur ne s'invente un parent intercalaire ...
parent qui pourrait ne pas supporter de fonction (ou la fonction prévue)

il vaut mieux s'assurer qu'on a bien trouvé le bon parent

function gereSurvolCuisson(machin)
{
var repere = machin.value;
if (!repere) {
repere = this.parentNode;
while(repere.tagName != 'TD') repere = repere.parentNode;
repere = repere.childNodes[0].value;
}
alert(repere);
}


Code à copier/coller et essayer :

<html>
<script type="text/javascript">
function gereSurvolCuisson(machin)
{
var repere;
repere = machin.value;
if (!repere) {
repere = this.parentNode;
while(repere.tagName != 'TD') repere = repere.parentNode;
var n ='', c=repere.childNodes.length;
while(c--)n+='n'+repere.childNodes[c].nodeType;
alert('Le parent (son ID) :n '+repere.id+'nses childNodes :'+n);
repere = repere.childNodes[0].innerHTML;
}
alert('1er enfant = ['+repere+']');
}
window.onload= function() {
if(document.getElementById('truc'))
document.getElementById('truc').onclick=gereSurvolCuisson;
}
</script>
<h1>Où l'on voit les problèmes des successions d'enfants</h1>
<table>
<tr>
<td id="ok">
<span id="truc">
hello!
</span>
</td>
</tr>
</table>
</form>
<p>Le click sur le "Hello" ci-dessus ne trouve pas le contenu du SPAN

[/code]

et voir :
https://developer.mozilla.org/en-US/docs/Web/API/Node.nodeType
et puis :
https://developer.mozilla.org/fr/docs/DOM/Node

Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Gloops
Le #26313264
SAM a écrit le 23/08/2014 11:36 :
while(repere.tagName != 'TD') repere = repere.parentNode;



Ah, oui, je me rappelle avoir eu l'occasion de faire ça en VBA, où
c'était Parent, et Form. Je l'avais mis dans une fonction, comme ça
c'était lisible à l'appel.

Dans ce cas précis (de retour en JavaScript) il y avait un nombre fixe
de niveaux à monter, alors pour tout faire tenir sur la même ligne il me
semblait que c'était aussi lisible en mettant les deux parentNode à l a file.
Publicité
Poster une réponse
Anonyme