Salut tout le monde !

Oui il faut faire remonter les infos, d'autant plus que c'est un cours qui fait partie d'un parcours officiel. C'est vraiment dommage d'être bloqué à cause d'éléments qui ne fonctionnent pas !

Le cours en lui même est bien fait et très complet, mais il y a plusieurs gros problèmes qui cassent la dynamique. Entre les barèmes un peu surprenants (genre l'activité 1), les scripts foireux (surtout en AJAX), les énoncés pas très clairs (je retiens cette histoire de "fichier texte"...), on se retrouve coincé à cause de petits détails...

Bon pour ma part, j'en ai fini avec ce cours, mais c'est vrai qu'il faudrait faire quelque chose pour ceux qui viendront après.

kisow24 a écrit:

Guettoudou a écrit:

kisow24 a écrit:

Bonjour,

Si le barême est important sur le fonctionnement du code, ça va être compliqué pour grappiller la majorité des points. Je ne sais pas si tu peux

recommencer avant d'avoir complètement valider tous les tests, au quel cas, il vaudra mieux réussir tous les autres pour avoir le pourcentage de réussite

final qui permet d'avoir le certificat de réussite de ce cours.

Bonjour kisow24,

Tu n'es pas vraiment rassurant... !

J'ai l'optimisme de croire que mes pairs sauront faire la part des choses. Vu le délai de correction, je ne peux que croire qu'ils prennent bien le temps de la réflexion...

Cordialement.

Alors quel résultat? Je suis presque en partie 3.

J'ai bien fait de croire en mes pairs ! 5/7 en moyenne, j'échappe carrément à la correctionnelle...! Et en plus, je récolte plein de conseils pour utiliser les bonnes pratiques. Pour l'instant, ce cours est vraiment top, ainsi que ses participants...

Good news et tu verras, tu as fait l'activité la + difficile

bonne continuation

 Bonjour à toutes et tous,

Dans la partie  'les base de jQuery' chapitre 1 ' la sélection d'éléments je lis :

"Vous avez peut-être remarqué l'utilisation des guillemets dans la colonne « Sélecteur jQuery » : $('div ul li[class="pair"]') et $('li[class="impair"]'). Ceci vient du fait qu'il est impossible d'utiliser des apostrophes à l'intérieur d'autres apostrophes. Lorsqu'un tel cas se produit, les apostrophes les plus internes sont remplacées par des guillemets."

J'aimerais avoir confirmation de l'impossiblité d'utiliser des apostrophes à l'intérieur d'autres apostrophes. Ces apostrophes internes ne peuvent-elles pas être échappées comme dans PHP par exemple.

Merci.

Alain

Guettoudou a écrit:

kisow24 a écrit:

Guettoudou a écrit:

kisow24 a écrit:

Bonjour,

Si le barême est important sur le fonctionnement du code, ça va être compliqué pour grappiller la majorité des points. Je ne sais pas si tu peux

recommencer avant d'avoir complètement valider tous les tests, au quel cas, il vaudra mieux réussir tous les autres pour avoir le pourcentage de réussite

final qui permet d'avoir le certificat de réussite de ce cours.

Bonjour kisow24,

Tu n'es pas vraiment rassurant... !

J'ai l'optimisme de croire que mes pairs sauront faire la part des choses. Vu le délai de correction, je ne peux que croire qu'ils prennent bien le temps de la réflexion...

Cordialement.

Alors quel résultat? Je suis presque en partie 3.

J'ai bien fait de croire en mes pairs ! 5/7 en moyenne, j'échappe carrément à la correctionnelle...! Et en plus, je récolte plein de conseils pour utiliser les bonnes pratiques. Pour l'instant, ce cours est vraiment top, ainsi que ses participants...

Félicitations! Tu vas pouvoir avancer. Ce cours peut se transformer en bourbier si on n'est pas bien dedans.

Bonne continuation.

Bonjour,

Je suis en train de corriger l'activité de la partie 4. Je n'ai que deux contributions à corriger pour l'instant et, dans l'une d'elle, j'ai un fichier "activite3.html" qui dit ceci :

... ainsi qu'un fichier "load.html" qui contient le code de départ de l'activité partie 4.

Bien entendu, quand on joue l'application, on obtient cette page :

... avec un seul bouton qui ne fonctionne pas !

Que feriez-vous à ma place ?

Cordialement.

Pardon ! Une précision : dans le fichier "load.html" ne se trouve que le code jquery, issu du code de départ de l'activité 4...

Vous ne sentiriez pas comme une odeur de troll, là ?

Cordialement.

Bonjour,

Déjà, il manque un">" à sa ligne -id="label"- dans "activite3.html".

Sinon, tout dépend aussi de ce qu'il a mis dans sa fonction click. Pour finir, si le barême dit qu'il faut que sa fonctionne

pour avoir les points....

kisow24 a écrit:

Bonjour,

Déjà, il manque un">" à sa ligne -id="label"- dans "activite3.html".

Sinon, tout dépend aussi de ce qu'il a mis dans sa fonction click. Pour finir, si le barême dit qu'il faut que sa fonctionne

pour avoir les points....

Bonjour kisow24,

OK pour le ">" qui permet juste d'afficher les deux autres boutons !

Son fichier "load.html" se présente comme ceci :

... donc, on ne sait pas à quoi correspondent "#projects li", contenus dans sa fonction load().

Peut-être que je culpabilise trop et que je devrais, comme tu le dis, appliquer le barème mais chacun a droit à une chance; j'ai pu en profiter à diverses reprises, depuis mon arrivée sur OC, et je trouve honnête de renvoyer l'ascenseur...

Cordialement

Je suis d'accord et moi-même je ne me prend pas la tête avec des détails mais il faut qu'il y aie un peu quelque chose.

Si le code ne fonctionne pas à cause de ponctuation oubliée, voire, une erreur orthographique avec le lien de la bibliothèque jquery,

c'est différent mais si tu commence à faire un peu trop le travail à sa place, tu ne corriges plus, tu lui fais un cours à la limite.

Bonjour

Je suis d'accord avec kisow24

surtout que la personne n'a même pas testé son code, c'est quand la moindre des choses non ?

et pour la partie 5, avec la libraire jQuery UI, vous avez testé le plugIn tabs() pour les onglets ? ça marche chez vous ? Chez moi ce plugin ne fonctionne pas alors que tous les autres fonctionnent 

merci 

à+

CyrilBron a écrit:

Bonjour

Je suis d'accord avec kisow24

surtout que la personne n'a même pas testé son code, c'est quand la moindre des choses non ?

et pour la partie 5, avec la libraire jQuery UI, vous avez testé le plugIn tabs() pour les onglets ? ça marche chez vous ? Chez moi ce plugin ne fonctionne pas alors que tous les autres fonctionnent 

merci 

à+

Tu es sûr de ne pas avoir oublié une ponctuation par exemple?

Bonjour

Merci pour ta réponse

en fait, je pense que j'avais des problèmes avec les fichiers de références css et js. Je me perds un peu là-dedans des fois

J'ai résolu en partant du fichier index.html de la démo des différents plug in jquery ui sur lesquels j'ai ajouté mes trucs. Je fais souvent comme ça quand ça marche pas il suffit d'effacer et d'adapter le fichier qui fonctionne ;) 

Le code, c'est comme l'écriture, on voit plus rien, vaut mieux repartir de zéro

bonne journée 

Bonjour,

Une petite question sans doute bête... Je suis en train d'étudier la partie sur Ajax, et de réaliser le TP de Chat en jQuery. 

J'ai un petit soucis car malgré la recopie conforme du code fourni en correction, cela ne fonctionne pas. J'aurais aimé savoir si le fichier "ac.htm" sensé stocker les lignes de discussion du chat doit avoir un formatage particulier? J'ai peut-être loupé une étape mais je ne crois pas avoir jamais lu quoi que ce soit sur ce fichier .htm auparavant, et le rédacteur du cours semble nous dire de l'utiliser comme une évidence, sans plus d'explications.

En comparaison, je fichier JSON qu'on voit rapidement dans le cours nécessite un formatage "particulier" des données qui lui sont envoyées / stockées.

Merci par avance pour vos éclaircissements! 

EDIT : Je voulais juste préciser que c'est le côté "php" de la chose qui semble ne pas fonctionner. Rien ne s'inscrit dans le fichier "ac.htm".

-
Edité par SébDesch 8 mars 2016 à 10:55:53

Bonjour,

Il me semble qu'en page 4, quelqu'un est déjà passé par là.

kisow24 a écrit:

Bonjour,

Il me semble qu'en page 4, quelqu'un est déjà passé par là.

En effet kisow24, mais malheureusement, pas de réponse concrète apportée... Sur le net je ne trouve rien d'utile non plus. J'essaye de faire différemment avec un fichier json en attendant. Mais ça semble moins simple à mettre en place que la façon de faire du rédacteur.

SébDesch a écrit:

Bonjour,

Une petite question sans doute bête... Je suis en train d'étudier la partie sur Ajax, et de réaliser le TP de Chat en jQuery. 

J'ai un petit soucis car malgré la recopie conforme du code fourni en correction, cela ne fonctionne pas. J'aurais aimé savoir si le fichier "ac.htm" sensé stocker les lignes de discussion du chat doit avoir un formatage particulier? J'ai peut-être loupé une étape mais je ne crois pas avoir jamais lu quoi que ce soit sur ce fichier .htm auparavant, et le rédacteur du cours semble nous dire de l'utiliser comme une évidence, sans plus d'explications.

En comparaison, je fichier JSON qu'on voit rapidement dans le cours nécessite un formatage "particulier" des données qui lui sont envoyées / stockées.

Merci par avance pour vos éclaircissements! 

EDIT : Je voulais juste préciser que c'est le côté "php" de la chose qui semble ne pas fonctionner. Rien ne s'inscrit dans le fichier "ac.htm".

-
Edité par SébDesch il y a environ 7 heures

L'ensemble du code fonctionne très bien sur mon serveur WAMP, en local. Mon fichier ac.htm est en html et UTF-8, normal quoi...

Question idiote : tu lances bien le programme à partir de son URL ?

Cordialement

Guettoudou a écrit:

L'ensemble du code fonctionne très bien sur mon serveur WAMP, en local. Mon fichier ac.htm est en html et UTF-8, normal quoi...

Question idiote : tu lances bien le programme à partir de son URL ?

Cordialement

J'ai re-testé en prenant bien soin de lancer la page via mon serveur apache. Aucun changement.

Voilà le code de mon fichier chat.php : 

<?php
$nom = $_POST['nom'];                    //On récupère le pseudo et on le stocke dans une variable
$message = $_POST['message'];            //On fait de même avec le message
$ligne = $nom.' > '.$message.'<br>';     //Le message est créé 
$leFichier = file('ac.htm');             //On lit le fichier ac.htm et on stocke la réponse dans une variable (de type tableau)
array_unshift($leFichier, $ligne);       //On ajoute le texte calculé dans la ligne précédente au début du tableau
file_put_contents('ac.htm', $leFichier); //On écrit le contenu du tableau $leFichier dans le fichier ac.htm

echo $ligne;

Voilà le code de mon fichier chat.html : 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Chat jQuery</title>
      <style type="text/css">
      #conversation {
        width: 300px;
        height: 400px;
        border: black 1px solid;
        background-color: #efecca;
        overflow-x: hidden;
        overflow-y: scroll; 
        padding: 5px;
        margin-left: 10px;
      }
      fieldset {
        width: 330px;
        background-color: #e6e2af;
        border: black 1px solid;
      }    
    </style>
  </head>
  
  <body>
   <fieldset>
     <legend>Un chat en jQuery</legend>
      <div id="conversation"></div><br />
      <form action="#" method="post">
        <input type="text" id="nom" value="pseudo" size="6">
        <input type="text" id="message" size="27">
        <button type="button" id="envoyer" title="Envoyer"><img src="envoyer.gif"></button>
      </form>
    </fieldset>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script>
    $(function() {
      afficheConversation();
      $('#envoyer').click(function() {
          var nom = $('#nom').val();
          var message = $('#message').val();
          $.post('chat.php', {'nom':nom, 'message': message }, function(data) {
            afficheConversation;
            alert(data);
          });
      });
      
      function afficheConversation() {
        $('#conversation').load('ac.htm');
        //$('#message').val('');
        $('#message').focus();
      }
      setInterval(afficheConversation, 4000);
    });
  </script>


  </body>
</html>

Voilà le code de mon fichier ac.htm : 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>

	<body>
		
	</body>
</html>

Comme vous pouvez le voir, j'ai inséré un petit mouchard dans le fichier php via le "echo($ligne)", qui me retourne une alerte javascript avec le contenu de cette variable. Elle contient bien ce qu'il faut à savoir "pseudo > message" selon ce qui est entré dans les textbox. 

Donc le soucis semble bien se trouver au niveau de l'interaction avec le fichier ac.htm, qui reste désespérément vide.

Malgré cela j'ai pu continuer le cours, mais j'aimerais tout de même avoir la finalité de ce problème.... 

SébDesch a écrit:

Guettoudou a écrit:

L'ensemble du code fonctionne très bien sur mon serveur WAMP, en local. Mon fichier ac.htm est en html et UTF-8, normal quoi...

Question idiote : tu lances bien le programme à partir de son URL ?

Cordialement

J'ai re-testé en prenant bien soin de lancer la page via mon serveur apache. Aucun changement.

Voilà le code de mon fichier chat.php : 

<?php
$nom = $_POST['nom'];                    //On récupère le pseudo et on le stocke dans une variable
$message = $_POST['message'];            //On fait de même avec le message
$ligne = $nom.' > '.$message.'<br>';     //Le message est créé 
$leFichier = file('ac.htm');             //On lit le fichier ac.htm et on stocke la réponse dans une variable (de type tableau)
array_unshift($leFichier, $ligne);       //On ajoute le texte calculé dans la ligne précédente au début du tableau
file_put_contents('ac.htm', $leFichier); //On écrit le contenu du tableau $leFichier dans le fichier ac.htm

echo $ligne;

Voilà le code de mon fichier chat.html : 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Chat jQuery</title>
      <style type="text/css">
      #conversation {
        width: 300px;
        height: 400px;
        border: black 1px solid;
        background-color: #efecca;
        overflow-x: hidden;
        overflow-y: scroll; 
        padding: 5px;
        margin-left: 10px;
      }
      fieldset {
        width: 330px;
        background-color: #e6e2af;
        border: black 1px solid;
      }    
    </style>
  </head>
  
  <body>
   <fieldset>
     <legend>Un chat en jQuery</legend>
      <div id="conversation"></div><br />
      <form action="#" method="post">
        <input type="text" id="nom" value="pseudo" size="6">
        <input type="text" id="message" size="27">
        <button type="button" id="envoyer" title="Envoyer"><img src="envoyer.gif"></button>
      </form>
    </fieldset>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script>
    $(function() {
      afficheConversation();
      $('#envoyer').click(function() {
          var nom = $('#nom').val();
          var message = $('#message').val();
          $.post('chat.php', {'nom':nom, 'message': message }, function(data) {
            afficheConversation;
            alert(data);
          });
      });
      
      function afficheConversation() {
        $('#conversation').load('ac.htm');
        //$('#message').val('');
        $('#message').focus();
      }
      setInterval(afficheConversation, 4000);
    });
  </script>


  </body>
</html>

Voilà le code de mon fichier ac.htm : 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>

	<body>
		
	</body>
</html>

Comme vous pouvez le voir, j'ai inséré un petit mouchard dans le fichier php via le "echo($ligne)", qui me retourne une alerte javascript avec le contenu de cette variable. Elle contient bien ce qu'il faut à savoir "pseudo > message" selon ce qui est entré dans les textbox. 

Donc le soucis semble bien se trouver au niveau de l'interaction avec le fichier ac.htm, qui reste désespérément vide.

Malgré cela j'ai pu continuer le cours, mais j'aimerais tout de même avoir la finalité de ce problème.... 

Est-ce que c'est bien localhost dans ton URL pour que Apache éxécute le php?

Sinon, tente avec un hébergement gratuit sur le web, il y en a un paquet pour faire des essais.

-
Edité par kisow24 9 mars 2016 à 13:09:10

SébDesch a écrit:

Voilà le code de mon fichier ac.htm : 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>

	<body>
		
	</body>
</html>

Voilà le problème ! Ton fichier ac.htm doit être vide au départ, sans toutes les balises html...

Tu verras, les messages s'écrivent sous la forme " pseudo > mon message<br> ", et s'ajoutent de droite à gauche, comme en arabe ou en hébreu. Au début, çà surprend...

Cordialement

-
Edité par Guettoudou 9 mars 2016 à 17:19:31

Guettoudou a écrit:

Voilà le problème ! Ton fichier ac.htm doit être vide au départ, sans toutes les balises html...

Tu verras, les messages s'écrivent sous la forme " pseudo > mon message<br> ", et s'ajoutent de droite à gauche, comme en arabe ou en hébreu. Au début, çà surprend...

Cordialement

-

Edité par Guettoudou il y a environ 14 heures

Rien n'y fait, malgré cette modification ça ne fonctionne pas. Pourtant je lance bien le fichier via mon serveur apache, le PHP est bien interprété puisque mon "mouchard" inséré dans le PHP fonctionne. C'est simplement l'accès, écriture au fichier "ac.htm" qui ne fonctionne pas.

Eventuellement si qqn a qques minutes pour partager son code fonctionnel, que je vois si ça marche chez moi et si oui, quelle différence il peut y avoir. Sinon ça restera un mystère non élucidé! 

hello 

je crois que tous les scripts ajax qui font référence à un ficher php dans le cours ne fonctionnent pas

pour ma part, j'ai repris le bon "vieux" code javaScript pour faire le tchat notamment et ça marche très bien

A+

Bonjour à tous, je suis sur la partie 3 du cours : https://openclassrooms.com/courses/simplifiez-vos-developpements-javascript-avec-jquery/un-jeu-en-jquery

J'aurais juste voulu informer l'auteur qu'il y a un soucis au niveau du code final, mais aussi un peu partout au niveau de la page.

On nous dit que le véhicule jaune a pour classe #vehicule au tout début, or il est parfois appelé par la classe #vehicule et d'autres fois par la classe #vj.

Donc, si l'on fait un copier/coller du code final ça marche, en revanche si l'on étudie le cours partie par partie, il y aura des soucis et tout ne fonctionnera pas, sauf si on y plonge le nez.

Si on est pas attentif, le jquery ne sera donc pas totalement fonctionnel.

J'ai aussi remarqué que dans la partie https://openclassrooms.com/courses/simplifiez-vos-developpements-javascript-avec-jquery/un-jeu-en-jquery#/id/r-1641327, la deuxième partie de la condition est en partie fausse : il s'agit de la variable vjX e non vjX2.

Cordialement.

-
Edité par ElodieKerjouan 10 mars 2016 à 11:40:05

Bonjour,

@ElodieKerjouan, en page 1, alnomcys répond peut-être au problème:

""un petite boulette s'est glissé dans la partie "un jeu en Jquery, la partie sur la collision ne fonction que d'un coté car il y a une erreur dans le code, il faut remplacer la partie après le "||" par: ((vjX > vrX) && (vjX < (vrX+66)) && (vrY > (vjY+120)) && (vrY < (vjY+150)) && (ok == 1))""

En fait, on signale tous les deux le même problème

C'est quelque chose qu'il faudrait éventuellement rectifier si l'auteur passe ici.

SébDesch a écrit:

Eventuellement si qqn a qques minutes pour partager son code fonctionnel, que je vois si ça marche chez moi et si oui, quelle différence il peut y avoir. Sinon ça restera un mystère non élucidé! 

En comparant nos deux codes, je m'aperçois que tu utilises la version de jQuery du cours (v1.11.1 de 2005), appelée à cette ligne :

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></scrip>

J'ai déjà abordé ce cours, en janvier 2015; à l'époque, il n'était pas certifiant. Mais je me rends compte que j'avais déjà commenté ce script car çà ne fonctionnait pas, et je l'avais remplacé par mon jQuery en local qui est la version v2.1.3 :

<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> -->
<script src="jquery.js"></script>

C'est la seule différence notable avec ton code, si ce n'est que j'ai aussi fermé mon code php (?>)...

Cordialement

-
Edité par Guettoudou 10 mars 2016 à 15:29:48

ElodieKerjouan a écrit:

En fait, on signale tous les deux le même problème

C'est quelque chose qu'il faudrait éventuellement rectifier si l'auteur passe ici.

Bonjour,

Tout ce genre de problèmes est à signaler à hello@openclassrooms.com.

En général, ils réagissent très vite.

Quand à Michel Martin -- qu'il soit remercié pour son œuvre ! --, je pense que çà fait un bail qu'il est passé à autre chose...

Cordialement

-
Edité par Guettoudou 10 mars 2016 à 15:44:32

Bonjour à toutes et tous,

je viens vers vous pour un peu d'aide. Cela fait 2h00 que je bloque.

Je suis à l'activité de la partie 2 avec la création du gestionnaire de formulaire.

Lorsque je récupère la valeur de mon input "LABEL" et que je veux l'afficher sur la partie de gauche, la valeur s'affiche quand je clique sur "OK" mais s'efface aussitôt. Quelqu'un aurait-il une idée s'il vous plaît?

Voici le code html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Générateur de formulaire</title>
        <link type="text/css" href="css/style.css" rel="stylesheet">
    </head>
    
    <body>
        <div id="gauche">
            
        </div>
        
        <div id="droite">
            Utilisez ces boutons pour créer votre formulaire<br><br>
            <button id="btnlabel">Label</button>
            <button id="btntexte">Zone de texte</button>
            <button>Bouton</button><br><br>
            <hr>
            
            <!-- CONTENU AFFICHABLE
            LORSQUE L'ON CLIQUE SUR 
            CHAQUE BOUTON -->
            <form>
                <!-- CONTENU DU BOUTON <<LABEL>> -->
                <label for="texte1">Texte du label</label>
                <input type="text" id="texte1"/>
                <button type="submit" id="ok1">OK</button>
            </form>
        </div>
        
        <!-- SCRIPTS -->
        <script src="js/jquery.js"></script>
        <script src="js/monscript.js"></script>
    </body>
</html>

Et le code jQuery :

$(function() {
        
        $('#ok1').click(function() {
            var valeur = $('#texte1').val();
            $('#gauche').append(valeur);
        });
});

Staif54520 a écrit:

Lorsque je récupère la valeur de mon input "LABEL" et que je veux l'afficher sur la partie de gauche, la valeur s'affiche quand je clique sur "OK" mais s'efface aussitôt. Quelqu'un aurait-il une idée s'il vous plaît?

Voici le code html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Générateur de formulaire</title>
        <link type="text/css" href="css/style.css" rel="stylesheet">
    </head>
    
    <body>
        <div id="gauche">
            
        </div>
        
        <div id="droite">
            Utilisez ces boutons pour créer votre formulaire<br><br>
            <button id="btnlabel">Label</button>
            <button id="btntexte">Zone de texte</button>
            <button>Bouton</button><br><br>
            <hr>
            
            <!-- CONTENU AFFICHABLE
            LORSQUE L'ON CLIQUE SUR 
            CHAQUE BOUTON -->
            <form>
                <!-- CONTENU DU BOUTON <<LABEL>> -->
                <label for="texte1">Texte du label</label>
                <input type="text" id="texte1"/>
                <button type="submit" id="ok1">OK</button>
            </form>
        </div>
        
        <!-- SCRIPTS -->
        <script src="js/jquery.js"></script>
        <script src="js/monscript.js"></script>
    </body>
</html>

Bonjour,

J'ai connu ce souci et, pour ne pas me vanter de t'apporter la solution, je vais te citer l'un de mes correcteurs :

" ...Vous utilisez une balise <form> pour le formulaire de droite, ce qui fait qu'au clic sur le bouton OK, la page est rechargée et le champ, label ou bouton créé à gauche est immédiatement supprimé.
Il aurait fallu utiliser une balise <div> à la place du <form>, ou demander à javascript de ne pas recharger la page à la validation du formulaire (via la méthode preventdefault())..."

Et il avait raison : çà fonctionne !

Cordialement

Guettoudou a écrit:

Staif54520 a écrit:

Lorsque je récupère la valeur de mon input "LABEL" et que je veux l'afficher sur la partie de gauche, la valeur s'affiche quand je clique sur "OK" mais s'efface aussitôt. Quelqu'un aurait-il une idée s'il vous plaît?

Voici le code html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Générateur de formulaire</title>
        <link type="text/css" href="css/style.css" rel="stylesheet">
    </head>
    
    <body>
        <div id="gauche">
            
        </div>
        
        <div id="droite">
            Utilisez ces boutons pour créer votre formulaire<br><br>
            <button id="btnlabel">Label</button>
            <button id="btntexte">Zone de texte</button>
            <button>Bouton</button><br><br>
            <hr>
            
            <!-- CONTENU AFFICHABLE
            LORSQUE L'ON CLIQUE SUR 
            CHAQUE BOUTON -->
            <form>
                <!-- CONTENU DU BOUTON <<LABEL>> -->
                <label for="texte1">Texte du label</label>
                <input type="text" id="texte1"/>
                <button type="submit" id="ok1">OK</button>
            </form>
        </div>
        
        <!-- SCRIPTS -->
        <script src="js/jquery.js"></script>
        <script src="js/monscript.js"></script>
    </body>
</html>

Bonjour,

J'ai connu ce souci et, pour ne pas me vanter de t'apporter la solution, je vais te citer l'un de mes correcteurs :

" ...Vous utilisez une balise <form> pour le formulaire de droite, ce qui fait qu'au clic sur le bouton OK, la page est rechargée et le champ, label ou bouton créé à gauche est immédiatement supprimé.
Il aurait fallu utiliser une balise <div> à la place du <form>, ou demander à javascript de ne pas recharger la page à la validation du formulaire (via la méthode preventdefault())..."

Et il avait raison : çà fonctionne !

Cordialement

Merci beaucoup, au moment où je m'en suis aperçu, et que je venais poster que j'avais trouvé la solution, je vois ta réponse.

En tout cas merci de ta réactivité.