Discussion :

[biguet]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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";

[psychadelic]

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

<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 CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 JAVASCRIPT :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

[biguet]

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