deux problèmes js.

Le
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
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Y.D.
Le #25731522
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>

<button onclick="go();">Clic!</button>
</body>

</html>


--
Y.D.
Une Bévue
Le #25733272
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+=' for(...){
machin.innerHTML+='<option n>valeur n</option>';
}
machin.innerHTML+='</select>'; (seulement la balise de fermeture)

eh ben dans l'inspecteur j'avais :
les options...

si bien que le truc ne marchait pas, j'ai changé le code bien sûr.
là le parseur était TROP rapide )))
Y.D.
Le #25733922
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+='
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+=' /* ... */
docuemnt.getElementById("monselect").innerHTML += '<option n>valeur n</option>';

--
Y.D.
Une Bévue
Le #25734572
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+=' /* ... */
docuemnt.getElementById("monselect").innerHTML += '<option n>valeur
n</option>';



oui, effectivement, bonne idée.
SAM
Le #25735682
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) :




Pour le "DOM" (et HTML.5) voir :
à rapprocher du "HTMLOptionElement object" vu ici :


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Une Bévue
Le #25735762
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"...
iakou Hors ligne
Le #25741192
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 :
iakou Hors ligne
Le #25741202
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 :
SAM
Le #25741472
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 :



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Publicité
Poster une réponse
Anonyme