Discussion :

[Huyenlong]

Salut

Je teste du code en voulant faire apparaitre un texte dans un Div en cliquant sur un bouton. Le texte apparait bien dans le Div en question mais pendant une fraction de seconde et je ne comprends pas ce que j'ai fait de mal dans le code

Code HTML :

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
<div id="zone3">
          <form id="addPost">
            <div>
              <input type="text" id="titleCom" placeholder="title">
            </div>
            <div>
              <textarea id="bodyCom" cols="66" rows="9"></textarea>
 
            </div>
            <!-- <input type="submit" value="submit"> -->
            <button id="btn" value="Submit form"> Submit </button>
          </form>
 
 
 
 
        </div>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
let Body = 'Test commentaire';
function SendACom(e){
        // let Body = document.getElementById('bodyCom').value;
    let NewParagraphe = document.createElement('p');
    let NewText = document.createTextNode(Body);
    NewParagraphe.appendChild(NewText);
    let a = document.getElementById('zone4');
    a.appendChild(NewText);
    // // e.stopPropagation(); 
    // console.log(Body);
 
 
}

Merci pour l'aide si vous savez

[javatwister]

Bonsoir,

C'est un gag, c'est ça?

- aucun élément présenté n'a pour id "zone4";
- un formulaire pour faire apparaître un texte dans la page n'est pas logique;
- ta fonction SendACom() n'est appelée nulle part;
- en appuyant sur ton bouton, tu quittes la page donc aucune chance d'afficher quoi que soit...

[Huyenlong]

Oui désolé j'ai mal copié collé tout le html, enfin plus tôt je n'ai pas tout copié collé.

• Le div 4 apparait plus bas dans le code Html.
  La fonction SendACom est appellé tout en haut du code javascript.
  J'utilise pour le moment le formulaire pour de simple test, après il servira pour tester l'écriture dans un fichier .Json en local. Là en gros je voulais simplement cliquer sur un bouton et un texte apparait dans un Div. Après j'écris un commentaire avec un titre, quand je clique sur un bouton, le texte apparait dans un autre div et il s'écrit aussi dans un fichier .Json en local. https://gist.github.com/quenti77/9c6...cfdbfa338ddfb4

Tout ça dans le but de tester et apprendre les fonctionnalités.

Je copie de nouveau le code bien en entier :

Code HTML :

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
 
<div id="zone3">
          <form id="addPost">
            <div>
              <input type="text" id="titleCom" placeholder="title">
            </div>
            <div>
              <textarea id="bodyCom" cols="66" rows="9"></textarea>
 
            </div>
            <!-- <input type="submit" value="submit"> -->
            <button id="btn" value="Submit form"> Submit </button>
          </form>
 
 
 
        </div>
 
 
         <div id="zone4">
 
        </div>

Code JS :

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
 
 
document.getElementById('btn').addEventListener('click', SendACom)
 
let Body = 'Test commentaire';
function SendACom(e){
        // let Body = document.getElementById('bodyCom').value;
    let NewParagraphe = document.createElement('p');
    let NewText = document.createTextNode(Body);
    NewParagraphe.appendChild(NewText);
    let a = document.getElementById('zone4');
    a.appendChild(NewText);
    // // e.stopPropagation(); 
    // console.log(Body);
 
}

Ceux sont les premières fois que je pose des questions sur du code, donc je me rode dans la présentation

[javatwister]

OK, je comprends déjà mieux;

Comme je te le disais, un bouton de formulaire est fait pour ... envoyer un formulaire au serveur.
Bref, tu dois inhiber cette action avec la méthode preventDefault()

Code javascript :

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

1
2
3
4
5
6
7
8
9
document.getElementById('btn').addEventListener('click', SendACom)
 
let Body = 'Test commentaire';
function SendACom(e){
    e.preventDefault()
    let NewParagraphe = document.createElement('p');
    NewParagraphe.textContent=Body
    document.getElementById('zone4').appendChild(NewParagraphe);
}

[Huyenlong]

Je te remercie beaucoup, j'ai bien compris le preventDefault() en lisant la doc et ça marche bien.
Et ta modification du code, car j'étais en train de voir comment le rendre plus cours, et j'étais presque au niveau de ta modification avant de l'avoir vu. (pour l'instant ce n'est pas encore instinctif pour moi)