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 deux problèmes js.

deux problèmes js.

9 réponses
Avatar
Une Bévue
Je précise que ces deux problèmes js, je les ai contournés, mais bon,
j'aimerais comprendre.

1ier pb :

J'ai un "constructeur" GrowlNotification(...) qui insère du html dans la
page, en simplifiant :
document.body.innerHTML+='<div id="growlnotifications" style="right:
-312px;bottom:20px;">blahblahblah</div>';

je nomme cet élément :
this.growlnotifications=document.getElementById('growlnotifications');
ensuite j'ai voulu ajouter une méthode #setText(text); par :
this.setText=function(text){
this.growlnotifications.innerHTML=text;
}
ça n'a jamais marché, j'avais toujours "blahblahblah" comme texte.
j'ai contourné par :
this.setText=function(text){
document.getElementById('growlnotifications').innerHTML=text;
}

je ne vois pas pourquoi la 1ière solution n'a pas marché...


2ième problème :
j'ai voulu attaché un event listener à cette div :
document.getElementById('growlnotifications').addEventListener('click',
function(){alert('event');});

les clicks sur l'élément non jamais rien déclenché.

mais ça a marché avec setAttribute :
document.getElementById('growlnotifications')setAttribute('onclick',
"javascript:org_ytho_growlnotifications_hide(this)");
en ajoutant la fonction dans le constructeur par :
window["org_ytho_growlnotifications_hide"]=function(o){o.parentNode.style.right="-312px";return
false;}

au cas où vous auriez des écaircissements...
Signaler un problème avec ce contenu

9 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
Y.D.
Bonjour,

Pour les deux problèmes, ça ne vient pas du code fourni.

Un exemple minimal fonctionne parfaitement (firefox et chromium) :

<!DOCTYPE html>
<html lang="fr">

<head>
<title></title>
<script>
function GrowlNotification(){
document.body.innerHTML+='<div id="growlnotifications" style="right:
-312px;bottom:20px;">blahblahblah<button onclick="test();">Clic!</button></div>';

this.growlnotifications=document.getElementById('growlnotifications');

this.setText=function(text){
this.growlnotifications.innerHTML=text;
}
this.growlnotifications.addEventListener('click', function(){alert('event');});
}

function go(){
a = new GrowlNotification();
}
function test(){
a.setText("Lorem ipsum...");
}
</script>
</head>

<body>

<p>Une page...</p>
<button onclick="go();">Clic!</button>
</body>

</html>


--
Y.D.
Avatar
Une Bévue
Le 20/10/13 12:01, Y.D. a écrit :
Pour les deux problèmes, ça ne vient pas du code fourni.

Un exemple minimal fonctionne parfaitement (firefox et chromium) :



bon.

j'ai changé mon code en utilisant le dom plutôt que innerHTML.
c'est nettement plus verbeux :
59 lignes avec innerHTML
91 avec dom

...

du coup je ne comprends pas pourquoi ça n'avait pas marché, d'autant que
j'ai un autre constructeur ModalDialogBox qui marche par innerHTML...

peut-être une coquille quelque part ?

(je suis assez étourdi)

je regarderai ton test et revérifierai mon code original avec innerHTML.

Dernièrement j'ai eu une surprise, avec Safari, je construisais un
<select> avec une dizaine d'options comme ça :

machin.innerHTML+='<select ...>'; (seulement la balise d'ouverture)
for(...){
machin.innerHTML+='<option n>valeur n</option>';
}
machin.innerHTML+='</select>'; (seulement la balise de fermeture)

eh ben dans l'inspecteur j'avais :
<select ...></select> (avec fermeture)
les options...

si bien que le truc ne marchait pas, j'ai changé le code bien sûr.
là le parseur était TROP rapide )))
Avatar
Y.D.
Le 21/10/2013 08:49, Une Bévue a écrit :
Dernièrement j'ai eu une surprise, avec Safari, je construisais un <select> avec
une dizaine d'options comme ça :

machin.innerHTML+='<select ...>'; (seulement la balise d'ouverture) [...]

si bien que le truc ne marchait pas, j'ai changé le code bien sûr.
là le parseur était TROP rapide )))



Non il faisait ce qu'il doit faire, parser le document après chaque insertion.
Pour insérer un select et toutes ses options d'un coup il faut construire une
chaîne contenant l'ensemble et faire un seul innerHTML à la fin.

Une autre possibilité aurait été d'insérer le 'select' avec innerHTML puis
d'insérer dans cet élément les 'option' :

machin.innerHTML+='<select id="monselect" ...></select>';
/* ... */
docuemnt.getElementById("monselect").innerHTML += '<option n>valeur n</option>';

--
Y.D.
Avatar
Une Bévue
Le 21/10/13 13:44, Y.D. a écrit :
Non il faisait ce qu'il doit faire, parser le document après chaque
insertion. Pour insérer un select et toutes ses options d'un coup il
faut construire une chaîne contenant l'ensemble et faire un seul
innerHTML à la fin.



oui, c'est ce que j'ai fini par faire...

Une autre possibilité aurait été d'insérer le 'select' avec innerHTML
puis d'insérer dans cet élément les 'option' :

machin.innerHTML+='<select id="monselect" ...></select>';
/* ... */
docuemnt.getElementById("monselect").innerHTML += '<option n>valeur
n</option>';



oui, effectivement, bonne idée.
Avatar
SAM
Le 21/10/13 08:49, Une Bévue a écrit :

machin.innerHTML+='<option n>valeur n</option>';




machin.innerHTML += '<option value="' +n+ '">valeur ' +n+ '</option>n';

pit-être ?




Mais je préfère nettement la méthode "à l'ancienne"

var s = document.GetElementById('monSelectAmoi'),
o = '';
for(n=0;n<10;n++)
{
o = new Option('valeur '+n, n);
s[n] = o;
}

Plus d'info (en US) :
<http://blog.kevinchisholm.com/javascript/option-constructor/>




Pour le "DOM" (et HTML.5) voir :
<https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist?redirectlocale=en-US&redirectslug=HTML%2FElement%2Fdatalist>
à rapprocher du "HTMLOptionElement object" vu ici :
<https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement?redirectlocale=en-US&redirectslug=DOM%2FHTMLOptionElement>


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
Une Bévue
Le 22/10/2013 15:22, SAM a écrit :
machin.innerHTML += '<option value="' +n+ '">valeur ' +n+ '</option>n';

pit-être ?



euh, j'avais écrit en "symbolique"...
Avatar
iakou
Le vendredi 18 Octobre 2013 à 20:47 par Une Bévue :
Je précise que ces deux problèmes js, je les ai
contournés, mais bon,
j'aimerais comprendre.

1ier pb :

J'ai un "constructeur" GrowlNotification(...) qui insère du
html dans la
page, en simplifiant :
document.body.innerHTML+='
style="right:
-312px;bottom:20px;">blahblahblah
';

je nomme cet élément :
this.growlnotifications=document.getElementById('growlnotifications');
ensuite j'ai voulu ajouter une méthode #setText(text); par :
this.setText=function(text){
this.growlnotifications.innerHTML=text;
}
ça n'a jamais marché, j'avais toujours "blahblahblah"
comme texte.
j'ai contourné par :
this.setText=function(text){
document.getElementById('growlnotifications').innerHTML=text;
}

je ne vois pas pourquoi la 1ière solution n'a pas marché...


2ième problème :
j'ai voulu attaché un event listener à cette div :
document.getElementById('growlnotifications').addEventListener('click',
function(){alert('event');});

les clicks sur l'élément non jamais rien
déclenché.

mais ça a marché avec setAttribute :
document.getElementById('growlnotifications')setAttribute('onclick',
"javascript:org_ytho_growlnotifications_hide(this)");
en ajoutant la fonction dans le constructeur par :
window["org_ytho_growlnotifications_hide"]=function(o){o.parentNode.style.right="-312px";return

false;}

au cas où vous auriez des écaircissements...


Bonjour,
Bien que je n'ai pas bien compris ce vous vouliez faire, j'ai vu que vous utilisiez la propriété JS innerHTML.
J'ai eu récemment quelque souci avec celle-ci sous IE9 alors que tout fonctionnait parfaitement sous FF et Chrome.
En réalité je me suis aperçu que, quand la longueur de l'élément à injecter était 0, le champ défini par 'id' n'était pas mis à jour.
En d'autres termes si X est vide : document.getElementById('msg1').innerHTML = X; n'aura aucun effet et le champ identifié ici par 'msg1' restera inchangé !
LOGIQUE ou ILLOGIQUE je ne sais pas ?...
En effet IE aurait pu choisir l'option inverse, c'est à dire vider le champ plutôt que de conserver son contenu initial...
Je ne sais pas si cela peut vous aider, mais il s'agit bien d'1 subtilité de innerHTML.
Cordialement

Le vendredi 18 Octobre 2013 à 20:47 par Une Bévue :
Avatar
iakou
Le vendredi 18 Octobre 2013 à 20:47 par Une Bévue :
Je précise que ces deux problèmes js, je les ai
contournés, mais bon,
j'aimerais comprendre.

1ier pb :

J'ai un "constructeur" GrowlNotification(...) qui insère du
html dans la
page, en simplifiant :
document.body.innerHTML+='
style="right:
-312px;bottom:20px;">blahblahblah
';

je nomme cet élément :
this.growlnotifications=document.getElementById('growlnotifications');
ensuite j'ai voulu ajouter une méthode #setText(text); par :
this.setText=function(text){
this.growlnotifications.innerHTML=text;
}
ça n'a jamais marché, j'avais toujours "blahblahblah"
comme texte.
j'ai contourné par :
this.setText=function(text){
document.getElementById('growlnotifications').innerHTML=text;
}

je ne vois pas pourquoi la 1ière solution n'a pas marché...


2ième problème :
j'ai voulu attaché un event listener à cette div :
document.getElementById('growlnotifications').addEventListener('click',
function(){alert('event');});

les clicks sur l'élément non jamais rien
déclenché.

mais ça a marché avec setAttribute :
document.getElementById('growlnotifications')setAttribute('onclick',
"javascript:org_ytho_growlnotifications_hide(this)");
en ajoutant la fonction dans le constructeur par :
window["org_ytho_growlnotifications_hide"]=function(o){o.parentNode.style.right="-312px";return

false;}

au cas où vous auriez des écaircissements...


Bonjour,
Bien que je n'ai pas bien compris ce vous vouliez faire, j'ai vu que vous utilisiez la propriété JS innerHTML.
J'ai eu récemment quelque souci avec celle-ci sous IE9 alors que tout fonctionnait parfaitement sous FF et Chrome.
En réalité je me suis aperçu que, quand la longueur de l'élément à injecter était 0, le champ défini par 'id' n'était pas mis à jour.
En d'autres termes si X est vide : document.getElementById('msg1').innerHTML = X; n'aura aucun effet et le champ identifié ici par 'msg1' restera inchangé !
LOGIQUE ou ILLOGIQUE je ne sais pas ?...
En effet IE aurait pu choisir l'option inverse, c'est à dire vider le champ plutôt que de conserver son contenu initial...
Je ne sais pas si cela peut vous aider, mais il s'agit bien d'1 subtilité de innerHTML.
Cordialement

Le vendredi 18 Octobre 2013 à 20:47 par Une Bévue :
Avatar
SAM
Le 25/10/13 18:23, iakou a écrit :
J'ai eu récemment quelque souci avec celle-ci sous IE9
je me suis aperçu que, quand la longueur de l'élément à injecter
était 0, le champ défini par 'id' n'était pas mis à jour.



??? réellement ??
avec :
document.getElementById('msg1').innerHTML = '';
IE (lequel ?) ne vide pas le div en question ?

Je ne sais pas si cela peut vous aider, mais il s'agit bien d'1 subtilité de
innerHTML.



Heu ... si c'est vrai, c'est bien embêtant :-(

(il y a d'autres subtilités curieuses avec innerHTML :
<http://stephane.moriaux.pagesperso-orange.fr/truc/innerHTML_danger> )



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8