Viser une étiquette

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

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

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.


--

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.

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

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);
}

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

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.