Textarea & modif

Hello,

Je n'ai pas de problème particulier car j'ai résolu cela mais je souhaite comprendre quelque chose :

Contexte - Je génère à la volé du JSON en JS pour l'afficher dans une <textarea>.
Question - Pourquoi quand je modifie le JSON qui est afficher dans la <textarea> je ne peux plus générer mon JSON à l'intérieur... Pourtant je vois dans l'inspecteur mon JSON modifié ! mais visuellement dans le navigateur, je vois pas ma modif...

Suis-je bien clair ?

Bonjour,

C'est pas trop clair, mais de ce que je comprends, il ne suffit pas de modifier le JSON, il faut aussi ré-exécuter le code qui le met dans le textarea.

Amicalement,

Merci de ta réponse,
Le code je le ré-exécute.
Pour ce qui est de l'ordre :

1 - J'ai un tableau où je remplie de couple cle valeur.
2 - Le JSON est généré via un <button>... je clic, ça fonctionne. (textarea.innerHTML = mon json)
3 - Je modifie le JSON directement avec le clavier (quand j'ai le focus sur la textarea, par exemple je modifie une valeur ou une cle, ou même simplement une lettre)
4 - Je re-clic sur mon <button>... visuellement mon textarea n'est pas impacté (alors qu'il devrait m'afficher l'ancien json, celui avant ma modification) je vois dans le DOM que l'ancien JSON est présent... mais visuellement j'ai toujours ma modif d'afficher... je ne comprend pas pourquoi .

Je vais essayé de simuler cela sur codepen pour une meilleur compréhension.
Modifié par JENCAL (10 Mar 2016 - 17:20)

Voila le codepen

Donc, Si je clic sur le button, l'innerHTML est remplacer (d'ailleur c'est du string... pas du json mais c'est pareil)....
Par contre, si on modifie à la main le textarea et que l'on clic, cela fonctionne qu'a moitié !
Si on inspecte le textarea on voit la modif, mais visuellement rien n'est changer.
Je ne comprend pas ce comportement
Modifié par JENCAL (10 Mar 2016 - 17:32)

Pour rappel, je cherche pas a "résoudre" le problème, car si on met value, cela fonctionne, mais je cherche à "comprendre" le comportement... si vous avez de idée.. ou des liens..

Bonjour,

Il faut utiliser document.getElementById('textareaID').value = str; et non pas document.getElementById('textareaID').innerHTML = str;

EDIT : et la raison, c'est "parce que c'est comme ça qu'il faut faire"
EDIT 2 : quand on modifie le contenu d'un textarea en y cliquant dedans et en y entrant quelque chose à l'aide du clavier, il semble que seule la propriété "value" du textarea soit modifiée et non la propriété innerHTML (au moins avec firefox et chrome). Il n'est pas garanti que ce soit le même comportement dans tous les navigateurs. De tout ça découle un affichage qui peut surprendre.
EDIT 3 : je viens de faire quelques tests. Lorsque "value" et "innerHTML" d'un textarea ont des valeurs différentes, c'est "value" qui semble être affichée systématiquement, ce qui semble logique : le navigateur affiche le html du "innerHTML", puis, si "value" a une valeur, il remplace à l'affichage le contenu du textarea. L'inverse serait moins logique.

Amicalement,
Modifié par parsimonhi (11 Mar 2016 - 08:21)

Bonjour,

parsimonhi a écrit :
Il faut utiliser document.getElementById('textareaID').value = str; et non pas document.getElementById('textareaID').innerHTML = str;

EDIT : et la raison, c'est "parce que c'est comme ça qu'il faut faire"

Euuuuuuuh, pas mieux...

^_^

Oué "c'est comme ça qu'il faut faire", mais je suis un peu tatillon, j'aime bien savoir pourquoi ça fonctionne et pourquoi ça fonctionne pas... mais bon, j'ai bien compris que .value, quand il s'agit d'un input, est plus important que le .innerHTML, même dans le DOM est différent du visuel.. car au final, quand tu remplace avec le clavier la value de la textarea, si tu inspecte, rien n'a changer....

Bonjour,

Où est-ce que tu regardes dans l'inspecteur (et c'est l'inspecteur de quel navigateur) ?

EDIT : si j'utilise l'inspecteur de Chrome par exemple, je fais afficher "Elements" en bas à gauche et "Properties" en bas à droite. Je regarde dans "Properties" pour "textarea#textareaID". Je vois une "value" disons "V1". Je clique dans le textarea. Je remplace "V1" par "V2". Je retourne en bas dans les "elements" à gauche. Je clique sur un élément autre que le textarea puis je reviens cliquer sur le textarea. Je vais ensuite voir à droite dans "Properties" pour "textarea#textareaID" : j'ai bien "V2" pour la propriété "value".

Amicalement,
Modifié par parsimonhi (11 Mar 2016 - 11:35)

Oui, je suis d'accord, ce n'est pas forcément intuitif dans l'inspecteur de Chrome (que j'utilise), si tu modifie le texte dans le textarea, tu ne le vois pas dans le code, et l'inverse ne fonctionne pas non plus...

IL n'y a rien à comprendre, innerHTML n'est utilisé que lors de la phase de construction et c'est tout à fait logique. Le code entre <textarea> et </textarea> est transféré dans value à la création de la zone mais par la suite ce n'est pas réciproque.

QuentinC a écrit :
IL n'y a rien à comprendre,

QuentinC a écrit :

innerHTML n'est utilisé que lors de la phase de construction et c'est tout à fait logique. Le code entre &lt;textarea&gt; et &lt;/textarea&gt; est transféré dans value à la création de la zone mais par la suite ce n'est pas réciproque.

Donc y'a a comprendre.... merci
Modifié par JENCAL (14 Mar 2016 - 10:16)