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)