Bonjour,

J'aurais besoin d'aide pour comprendre pourquoi mon code ne fonctionne pas comme je le voudrais!

Dans l'exercice, lorsque je clique sur "label", je crée la zone "texte de label", ou je peux écrire par exemple "prénom", et quand je clique sur "OK", le texte écrit passe à gauche, et mon "texte de label, etc, OK" disparaissent:

Jusqu'ici pas de problème.

Puis lorsque je clique sur la zone "zone de texte", idem, mais quand mon texte passe à gauche, le texte précédent, dans mon exemple "Prénom", s'efface, alors que je voudrais le conserver. 

En image:

Voici mon code HTML:

Mon code JS:

$(document).ready(function(){

var newDiv = document.createElement('div');

var newP = document.createElement('p');

var texte="";

/* Création de la fonction qui crée une zone de texte */

function creationInput(){

/*contenu du nouveau div*/

newDiv.innerHTML = '<div id="newDiv"><form><p><label for="titre"></label><input type="text" name="label" id="titre" size="15"/><button id="ok">OK</button></p></form></div>';

/*insérer le nouveau div après le div id="droite"*/

$('#droite').after(newDiv);

$('label').css({

marginLeft:'10px',

marginRight:'10px' });

$('#droite').css('height','80px');

$('#newDiv').css({

borderTop:'solid 1px #b000ff',

float:'right',

backgroundColor:'#CEFFF8',

height:'920px',

width:'30%' });

/*positionnement du bouton ok*/

$('#ok').css({

marginLeft:'15px'});

};

/* Création de la fonction qui dit à OK quoi faire */

function cliquerOk(){

/*contenu du nouveau paragraphe*/

newP.innerHTML = '<span>'+texte+'</span>';

/*J'insère du code HTML dans le div #gauche*/

$('#gauche').html(newP);

/*Supprimer le newDiv, label etc*/

$(newDiv).remove();

/*conserver le fond d'écran bleu*/

$('#droite').css({

backgroundColor:'#CEFFF8',

height:'1000px',

padding:'10px',

paddingLeft:'71%'

});

};

/*quand on clique sur label*/

$('#label').on('click', function(){

creationInput();

$('label').text('Texte de label ');

/*quand on clique sur ok*/

$('#ok').on('click', function(){

texte=$('input[name="label"]').val();

cliquerOk();

return false;

}); });

/*quand on clique sur zone de texte*/

$('#zone').on('click', function(){

creationInput();

$('label').text('id de la zone de texte ');

/*quand on clique sur ok*/

$('#ok').on('click', function(){

/*je crée un nouveau paragraphe après le <span> précédent*/

$('<span>').html(newP);

texte=$('input[name="label"]').val();

cliquerOk();

return false;

}); }); });

Je tourne le code dans tous les sens,... comment arriver à afficher le deuxième texte sous le premier?

Merci par avance de votre aide!

Salut,

Ton code m'a l'air bien compliqué (après je n'ai pas fait cette activité donc c'est peut-être normal ^^).

Pour ton problème, essaie de remplacer le bout de code de la fonction cliquerOk :

/*J'insère du code HTML dans le div #gauche*/

$('#gauche').html(newP);

Par celui-ci :

/*J'insère du code HTML dans le div #gauche*/

var contentGauche = $('#gauche');
$('#gauche').html(contentGauche + newP);

-
Edité par Deejayfool 22 juillet 2016 à 9:15:37

Bonjour,

Merci de votre réponse.

Je comprends la logique! J'ai appliquer cette modification à la fonction "cliquerOK"

 mais, ça marche quand même pas.

D'autres idées?

Au temps pour moi, je n'avais pas vu qu'en fait tu réutilisais toujours le même objet "newP". Le contenu est remplacé à chaque appel de ta fonction "cliquerOK", donc ça ne peut pas marcher.

Je t'ai mis la version corrigée à cette adresse : http://codepen.io/Deejayfool/pen/XKqkPB

OKOK un grand merci à toi

Merci d'avoir pris de temps d'étudier mon code