Ecrire dans un div en javascript

Version imprimable

Je voudrais écrire dans un div selon le nom du formulaire. Quand j'écris dans un input ça marche très bien. Mais quand j'écris dans le div ça ne marche pas. Quelqu'un peut-il me montrer comment écrire dans un div en fonction du nom du formulaire? J'ai eu cette erreur : Uncaught TypeError: Impossible de lire la propriété 'innerHTML' . Merci bien.voici mon code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
var mycpt =1;
 
             var coul = (200+(1+0.5)*mycpt*100);
             var div = document.createElement("div");
             div.setAttribute("class","title");
             div.setAttribute("id",`title${mycpt}`);
             div.setAttribute("style","background-color: silver;");
             div.setAttribute("style","position: absolute;");
             div.style.border ="1px solid blue";
             div.style.width="100px";
             div.style.height="200px";
             div.style.top="300px";
             div.style.left=coul+'px';
 
             var x = document.createElement("FORM");
             x.setAttribute("name","achille");
             x.setAttribute("action", "#");
             x.setAttribute("id", `chatformsss${mycpt}`);
             x.style.position="relative";
             x.style.top="70px";
             var input1 = document.createElement("INPUT");
             input1.setAttribute("type", "text");
             input1.setAttribute("name", `usernamee${mycpt}`);
             input1.setAttribute("id", `usernamee${mycpt}`);
             input1.setAttribute("value","salut");
             input1.style.width="98px";
 
             var div1 = document.createElement("div");
             div1.setAttribute("id", `messagesdzs${mycpt}`);
 
              var input2 = document.createElement("INPUT");
              input2.setAttribute("type", "text");
              //input2.setAttribute("size", "11");
              input2.setAttribute("id", `messagee${mycpt}`);
              input2.setAttribute("placeholder", "Message");
              input2.style.width="98px";
 
             var submit = document.createElement("INPUT");
             submit.setAttribute("type","submit");
             input1.setAttribute("type","text");
 
             submit.setAttribute("name","submit");
             submit.setAttribute("value","Envoyer");
 
             document.body.appendChild(div);
             x.appendChild(input1);
             x.appendChild(div1);
             x.appendChild(input2);
             x.appendChild(submit);
             div.appendChild(x);
 
 
   document.forms["achille"].elements[`messagesdzs${mycpt}`].innerHTML+="okokokok";

comme ça : https://developer.mozilla.org/fr/doc...ontenteditable

Citation:

<div contenteditable="true">....

sinon plutôt que d'écrire 50 lignes de code JS pour créer et surtout tester la mise en page,
j'utiliserai plutôt un cloneNode(true) https://developer.mozilla.org/fr/doc...Node/cloneNode

et aussi du css pour ce qui reste fixe.

ce qui donne :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
.title_plus {
  position: absolute;
  border  : 1px solid blue;
  width   : 100px;
  height  : 200px;
  top     : 300px;
/* left    : 350px; */
}
.title_plus > form {
  position: relative;
  top: 70px;
}
.title_plus > form > input { width: 98px; }

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<div id="Matrice" style="display:none">
 
  <div class="title title_plus" id="title">
    <form name="achille" action="#" id="chatformsss">
      <input type="text" name="usernamee" id="usernamee" value="salut">
      <div id="messagesdzs" contenteditable="true" ></div>
      <input type="text" id="messagee" placeholder="Message">
      <button type="submit" name="submit">Envoyer</button>
    </form>
  </div>
 
</div><!-- end #Matrice -->

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
llet NewDiv = document.querySelector('#Matrice > div').cloneNode(true);
let mycpt = 1;
let coul  = (200+(1+0.5)*mycpt*100); 
 
NewDiv.id += mycpt;
NewDiv.style.left =  coul+'px';
 
NewDiv.querySelectorAll('[id]').forEach(elm=>elm.id += mycpt)
NewDiv.querySelectorAll('[name]').forEach(elm=>elm.name += mycpt)
 
document.body.appendChild(NewDiv);
 
document.querySelector(`div#messagesdzs${mycpt}`).textContent = 'okokokok';  // et voilaaaaaaaaa !

Un peu plus simple à gérer non ?

09/02/2020, 21h26
biguet

Merci beaucoup Psychadelic ça marche ! tu m'as appris beaucoup ! encore Merci.