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.
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.
Le 17/07/2014 10:32, Gloops a écrit :
À 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
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)
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.
?? 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
Ah, ben je sis un peu perdu avec ta fonction survol, pour être honnêt e,
mais ça je vais regarder.
Ah ben ... Pareil.
J'avais regardé childs et children ...
On attend un peu pour le bonnet d'âne ?
Oh mais ... on dirait bien que voilà de la lecture :)
Merci.
--
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
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);
}
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-- )
ou plus simplement :
elt.onmouseover = gereSurvolCuisson;
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
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.