Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage JavaScript Viser une étiquette

Viser une étiquette

8 réponses
Avatar
Gloops
Bonjour tout le monde,

J'ai un jeu de boutons radio g=E9n=E9r=E9s par une plateforme de=20
d=E9veloppement, qui sortent comme ceci (voici le premier) :

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


Il para=EEt douteux que je puisse beaucoup modifier le rendu, aussi je=20
modifie les propri=E9t=E9s en dynamique. Je souhaite ex=E9cuter une actio=
n au=20
passage de la souris, aussi au chargement de la page j'ex=E9cute ceci :

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

=E7a marche bien, mais seulement en passant la souris sur le bouton-radio=
=20
lui-m=EAme. J'aimerais bien que l'action puisse s'ex=E9cuter aussi en=20
passant la souris sur son texte. Est-ce qu'on sait d=E9signer cet =E9l=E9=
ment=20
label ? Une boucle sur tous les =E9l=E9ments label, peut-=EAtre, avec un =
test=20
sur le texte ? Ou y a-t-il plus direct ?

J'ai essay=E9 de passer par radiobuttons[0].parent, mais on me renvoie=20
null. Il semble qu'il n'ait pas non plus d'enfants, si j'en crois le=20
DOMexplorer de Firefox.
Signaler un problème avec ce contenu

8 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
Olivier Miakinen
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
Avatar
SAM
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
Avatar
Gloops
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.


--
Avatar
Gloops
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.
Avatar
Olivier Miakinen
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
Avatar
Gloops
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);
}
Avatar
SAM
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
Avatar
Gloops
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.