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.
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
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
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.
[...] 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 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) :
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) {
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) {
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
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) {
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 :)
Oh mais ... on dirait bien que voilà de la lecture :)
Merci.
--
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.
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.
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 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
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
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
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); }
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);
}
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 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;
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
Cordialement, -- Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
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;
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
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;
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
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.
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.
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.