Logo GNT
Actualités Tests & Guides Bons Plans
GTA 6 iPhone 17 Copilot Switch 2 Temu ChatGPT Tesla
OVH Cloud OVH Cloud
Entraide Développement Développement Langage JavaScript boutons dynamiques

boutons dynamiques

4 réponses
Avatar
jacek55
Bonsoir,

Voil=E0 ce que j'ai fait :

<html><head><title>Testg</title>
<script type=3D"text/javascript">
<!--

function crb2 () {
var k ;
var x =3D document.createElement('input') ;
x.onclick =3D function(){alert('B 2')} ;
// x.onclick =3D "alert('B 2')" ;
x.type =3D "button" ;
x.value =3D "B 2" ;
x.name =3D "button_2" ;
document.getElementById("maforme").appendChild(x) ;
alert (document.getElementById("maforme").outerHTML) ;
alert (document.getElementById("maforme_n").outerHTML) ;
}

//-->
</script>
</head>

<body onload=3D'crb2()'>

<p>Test onclick</p>

<form id=3D"maforme" name=3D"maforme_n" action=3D"">
<input type=3D"button" name=3D"button_1" value=3D"B 1" onClick=3D"alert('B
1')">
</form>

</body></html>

J'ai plusieurs probl=E8mes avec :

1=B0 Le bouton 2 ne veux pas conna=EEtre son nom (x.name=3D"button_2") est
ineffective. Par ailleurs la m=EAme chose (attribution du nom de telle
mani=E8re) ne veux pas fonctionner pour les forms.

2=B0 Le gestionnaire onclick fonctionne avec la definition du script
ci-dessus mais on ne voit pas de "onclick..." dans "outerHTML" du fin
de script. Si on prend la definition qui est actuellement comment=E9e,
on le voit bien dans "outerHTML" mais elle ne fonctionne plus.

3=B0 Les deux "outerHTML" fonctionnent, bien que dans le deuxi=E8me
'getElementById' se r=E9fere au nom et pas id, donc en principe il ne
doit pas marcher.

Merci de se pencher sur mes malheurs

Jacek
Signaler un problème avec ce contenu

4 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
ASM
J'ai plusieurs problèmes avec :

1° Le bouton 2 ne veux pas connaître son nom (x.name="button_2") est
ineffective.


avec quel brouteur ?
parceque chez moi si il est reconnu :
- FF 1.0.5.1
- IE (Mac) si je ne stipule pas 'type' (bug sur type)

Par ailleurs la même chose (attribution du nom de telle
manière) ne veux pas fonctionner pour les forms.


N'y a aucune raison que ce ne soit pas accepté

Le plus fort :
x.bidule = 'machin'
IE voit bien bidule='machin' dans le outerHTML ou innerHTML
mais pas FF, alors que si on interroge B2, bidule y est (IE et FF)...

2° Le gestionnaire onclick fonctionne avec la definition du script
ci-dessus mais on ne voit pas de "onclick..."


toutafé, et alors ?

dans "outerHTML" du fin de script.


outerHTML ne fonctionne pas dans mon FF ...

Si on prend la definition qui est actuellement commentée,
on le voit bien dans "outerHTML" mais elle ne fonctionne plus.


Meuh ! si ! ça fonctionne toujours le onclick
comme IE a gueulé à l'erreur sur le nom, je lui ai seulement dit "continuer"

FF ayant gueulé dès avant (sur 1er outer) : "undefined"
il continue car ce n'est pas une erreur, juste c'est inconnu.

3° Les deux "outerHTML" fonctionnent,


non, pas dans FF
non, le deuxième ne fonctionne pas dans IE (Mac)

bien que dans le deuxième
'getElementById' se réfere au nom et pas id, donc en principe il ne
doit pas marcher.


en effet : ça ne marche pas



Conclusion ?
Se servir de innerHTML pour ce pourquoi c'est fait
et ne pas s'en servir pour récupérer des balises (et leurs contenus)
Quant à outerHTML ... reste à voir où ça fonctionne ?


--
Stephane Moriaux et son [moins] vieux Mac

Avatar
jacek55
Je reprends avec mon prog modifié :

<html><head><title>Testg</title>


<script type="text/javascript">
<!--
function crb2() {
var x = document.createElement('input') ;
x.onclick = function(){alert('B 2')} ;
// x.onclick = "alert('B 2')" ;
x.type = "button" ;
x.value = "B 2" ;
x.name = "button_2" ;
x.truck = "bidule" ;
document.getElementById("maforme").appendChild(x) ;
alert ("id "+document.getElementById("maforme").innerHTML) ;
alert ("name "+document.getElementById("maforme_n").innerHTML) ;
alert ("name button 1
"+document.getElementsByName("button_1")[0].innerHTML) ;
alert ("name button 2
"+document.getElementsByName("button_2")[0].innerHTML) ;
}
//-->
</script>


</head>

<body onload='crb2()'>

<p>Test onclick</p>

<form id="maforme" name="maforme_n" action="">
<input type="button" name="button_1" value="B 1" onClick="alert('B
1')">
</form>


</body></html>

J'utilise soit IE 6 0 2800 soit IE 6 0 2900.

J'ai remplacé outer par inner (pour des raisons obscures j'avais
pensé que inner c'est pour déclarer et outer c'est pour afficher).

Avec le programme modifié :

1° Les 3 premiers alertes s'affichent et effectivement on voit bien
truck='bidule'. 4-ème alert déclanche
"document.getElementsByName(...)[0].innerHTML" est null ou n'est pas
objet avec IE 6 0 2800, tandis que IE 6 0 2900 l'ignore tout
simplement.

2° L'affichage des 'onclick' est deroutant ; il devait y avoir une
explication genre 'mot résérvé function indique qu'il s'agit de
gestionnaire des evenements etc' mais qui, quoi, comment ?

3° On arrive à accèder à l'objet avec getElementById en citant son
nom ; cela n'est pas très génant, mais abérrant quant même.

Il existe peut-être un lien entre le comportement abérrant du
getElementById et l'impossibilité de déclarer le nom en dynamique,
mais qui, quoi, comment encore une foi.

J'ai essayé mettre le prog dans body ou carrement en ligne (sans
function crb2()) mais c'est la même chose.

Cela peut sembler être assez annexe, mais c'est utile pour la mise au
point et si on ne peut pas compter sur les inner, alors comment faire ?

Merci Stephane, si ce n'est pas abuser ce vieux (mais finalement pas
tellement) Mac.

Jacek
Avatar
ASM
Je reprends avec mon prog modifié :


Bon,
pour les tests (alerts)

dès qu'on doit se servir d'un objet (dont on n'est pas sûr)
il faut poser des conditions d'existance, et progressives

Ainsi, on ne lance pas tout de go :
document.getElementsByName("button_1")[0].innerHTML
mais
if(document.getElementsByName("button_1") &&
document.getElementsByName("button_1")>0 &&
document.getElementsByName("button_1")[0].innerHTML)
alert(document.getElementsByName("button_1")[0].innerHTML);

Si la 1ère condition n'est pas remplie (personne ne se nomme'button_1')
et qui peut faclement arriver, le reste n'est pas analysé et il n'y a
pas d'erreur, et ainsi de suite progressivement.

On peut poser des jalons pour voir ce qu'il se passe

if(document.getElementsByName("button_1")) {
alert('button_1 connu : n'+document.getElementsByName("button_1"));
if(document.getElementsByName("button_1")>0) {
alert('il y a au moins 1 element nommé button_1')
if(document.getElementsByName("button_1")[0].innerHTML)
alert('le 1er button_1 a pour code : n' +
document.getElementsByName("button_1")[0].innerHTML);
}
}


J'utilise soit IE 6 0 2800 soit IE 6 0 2900.


tu le fais exprès pour être certain que ça cafouille non ?

J'ai remplacé outer par inner (pour des raisons obscures j'avais
pensé que inner c'est pour déclarer et outer c'est pour afficher).


innerHTML est un truc à IE (qui a été tenté d'être implémenté -mal- dans
les autres brouteurs) et devrait donc fonctionner sous IE correctement.

Sinon, pour coder proprement, se référer à cette méthode :
http://developpeur.journaldunet.com/tutoriel/dht/050524-javascript-innerhtml-equivalent-dom-getelementbyid-replacedata.shtml
ou on nous dit :
pour remplacer le contenu d'une balise, la méthode IE serait :
document.all["textDiv"].innerHTML = "Texte de remplacement";
tandis que les navigateurs modernes autorisent :
longueurCible = document.getElementById("textDiv").firstChild.length;
document.getElementById("textDiv").firstChild.replaceData(0,
longueurCible, "Texte de remplacement");

Et où l'on voit avec ce document.all
que IE est très tenté de mélanger 'noms' et 'ids'
qui font bien partie du tout

De plus, IE est très capable de se dépatouiller avec la méthode 'propre'
pourquoi s'en priver ?
Si on trouve que IE rame moins avec sa méthode personnelle, alors
utiliser cette dernière ? (document.all) complétée de celle pour autres
navigateurs.


Avec le programme modifié :

1° Les 3 premiers alertes s'affichent et effectivement on voit bien
truck='bidule'. 4-ème alert déclanche
"document.getElementsByName(...)[0].innerHTML" est null ou n'est pas
objet avec IE 6 0 2800, tandis que IE 6 0 2900 l'ignore tout
simplement.

2° L'affichage des 'onclick' est deroutant ; il devait y avoir une
explication genre 'mot résérvé function indique qu'il s'agit de
gestionnaire des evenements etc' mais qui, quoi, comment ?


est-ce que innerHTML = innerJAVASCRIPT ?
comment M$ decrit-il les effets de son innerHTML ?

3° On arrive à accèder à l'objet avec getElementById en citant son
nom ; cela n'est pas très génant, mais abérrant quant même.


bien que mon IE (Mac) ne le fasse pas
document.all prend peut-être le dessus ?

Il existe peut-être un lien entre le comportement abérrant du
getElementById et l'impossibilité de déclarer le nom en dynamique,
mais qui, quoi, comment encore une foi.


je ne comprends pas cette afirmation
(qui va à l'encontre de toute expérimentation)

essaie en faisant :
x.onclick = function(){alert('nom = '+this.name)} ;
si au clic sur [B2] tu obtiens son nom, c'est bien qu'il y est

au final :
tu t'en moques de ce que innerHTML paraît contenir
l'important c'est le résultat.


ATTENTION !
innerHTML ne réagit pas du tout de la même façon dans un autre brouteur
que IE

exemple parlant,
avec IE puis FF, changer le contenu du champ et cliquer les boutons :

<html><form>
<p id="exo"><input name="ceChamp" type=text value="bidule" /></p>
<input type=button value="voir cet input"
onclick="alert(document.getElementById('exo').innerHTML);" />
<input type=button value="dupliquer cet input"
onclick="document.forms[0].appendChild(ceChamp.cloneNode(true));
this.disabled=true; this.value='rafaichir pour re-tester';" />
<input type=button value="dupliquer a la IE"
onclick="var c = document.createElement('P');
document.forms[0].appendChild(c);
document.forms[0].lastChild.innerHTML =
document.getElementById('exo').innerHTML;" />
</form></html>

Normalement, avec FF le nouveau champ dupliqué "à la IE" sera identique
à celui d'origine non modifé, tandis que celui dupliqué proprement
réflétera les changements.
IE qui a la mémoire courte ne se souvient plus du contenu d'origine.

Cela peut sembler être assez annexe, mais c'est utile pour la mise au
point et si on ne peut pas compter sur les inner, alors comment faire ?


peut-être maintenant sais-tu ?


--
Stephane Moriaux et son [moins] vieux Mac

Avatar
jacek55
Merci Stephane pour les infos.

Finalement je fait des innerHTML bêtes et mechants en rajoutant les
descriptions des boutons dans une variable et puis un beau innerHTML et
je n'ai plus de souci de la version d'IE.

Il faut dire que je suis en train de faire une application de comfort
pour mon travail, une chose qu'on fait habituellement en excel. J'ai
abandonné pour l'instant de le faire tourner chez moi, donc je
m'aligne sur ce que j'ai au boulot.

Merci encore, bonjour pour le (pas tellement) vieux,

Jacek