JulienZimmermann a écrit:

Bonsoir à tous,

Voilà je viens de commencer se nouveau cour sur JavaScript et je viens de finir le 1er cour. Hors je rencontre un légé soucis, ayant relu plusieurs fois le cour et en tapant aussi plusieurs fois les exemples je dois avoué qu'au moment de l'exercice j'étais un peu à la masse.

Je voulais savoir si ça l'avait fais à d'autres ou il y a que moi ^^.

En sachant que j'ai suivis les autres cours préconisés .  

Bonjour Julien,

J'en suis au troisième cours de Baptiste Pesquet. Notre professeur est un adepte de la programmation orientée objet et son JavaScript est résolument moderne.

A ce stade du cours, j'ai un peu l'impression de faire du jQuery...

Cordialement

Je sais que le cours préconise d'écrie son code sur sa machine et que cela a des vertus pédagogiques pour se faire la main avec la gestion de fichiers et pourquoi pas Git.

Mais cela peut être un peu rébarbatif et chronophage... Pour ceux qui ne connaissent pas et qui veulent exécuter les exemples du cours ou tester leur travail rapidement je vous conseille d'utiliser JSFiddle qui est une plateforme web dite "sandbox".

La prise en main est super facile, 3 panneaux représentent les fichiers sources de votre appli (HTML, CSS et JS) et un quatrième l'interface du browser où s'affiche le résultat.

Pour exemple l'appli d'autocomplétion de la partie Manipulez des formulaires : https://jsfiddle.net/MTovmassian/c30xfwbu/

-
Edité par Martin Tovmassian 1 juin 2016 à 0:19:32

Bonjour,

Dans les pré-requis de ce cours, il y a suivre le cours "Apprenez à coder en Javascript" et dans le chapitre "Configurez votre environnement de travail" il y a les info sur les outils ; JSFiddle, JS BIN et Code Open.

Du coup même si on à déjà le niveau, une petite lecture de ce cours est très intéressante

Bonjour,

Je suis dans la partie 2 | Réagissez à des événements

Dans la partie "à vous de jouer" le dernier exercice est la création d'un quiz.

Pour faire apparaitre la réponse, j'ai utilisé "replaceChild" 

Mais le problème est que lorsqu'on charge la page, ben il a déjà remplacé le noeud alors qu'on a pas encore cliqué sur le bouton.

Est ce que j'ai fait quelque chose de pas correcte ?

Dans la correction, ils utiliser innerhtml, est-ce obligé ?

Merci beaucoup !

// Liste des questions à afficher. Une question est définie par son énoncé et sa réponse
var questions = [
    {
        enonce: "Combien font 2+2 ?",
        reponse: "2+2 = 4"
    },
    {
        enonce: "En quelle année Christophe Colomb a-t-il découvert l'Amérique ?",
        reponse: "1492"
    },
    {
        enonce: "On me trouve 2 fois dans l'année, 1 fois dans la semaine, mais pas du tout dans le jour... Qui suis-je ?",
        reponse: "La lettre N"
    }
];

// boucle for 
for (var i = 0; i<questions.length; i++){
    
    function remplacement() {
        contenu.replaceChild(document.createTextNode(questions[i].reponse), bouton);
    };
    
    var contenu = document.getElementById("contenu");
    var bouton = document.createElement("button");
    bouton.textContent = "Afficher la réponse"

// appenchild
    
    var strong = contenu.appendChild(document.createElement("strong"));
    strong.appendChild(document.createTextNode("Question " + (i+1) + " : "));
    
    contenu.appendChild(document.createTextNode(questions[i].enonce));
    contenu.appendChild(document.createElement("br"));
    contenu.appendChild(bouton);
    contenu.appendChild(document.createElement("br"));
    contenu.appendChild(document.createElement("br"));
    
// Evénement
    
    var bouton = document.querySelector("button");
    bouton.addEventListener("click", remplacement());
    
    
};
    
 
    
   
    

Bonjour, 

J'ai un problème sur l'activité 2. Je n'arrive pas à afficher les résultats du formulaire

Voilà mon code :

/* 
Activité 1
*/

// Liste des liens Web à afficher. Un lien est défini par :
// - son titre
// - son URL
// - son auteur (la personne qui l'a publié)
var listeLiens = [
    {
        titre: "So Foot",
        url: "http://sofoot.com",
        auteur: "yann.usaille"
    },
    {
        titre: "Guide d'autodéfense numérique",
        url: "http://guide.boum.org",
        auteur: "paulochon"
    },
    {
        titre: "L'encyclopédie en ligne Wikipedia",
        url: "http://Wikipedia.org",
        auteur: "annie.zette"
    }
];

// TODO : compléter ce fichier pour ajouter les liens à la page web
// Pour chaque mot, on construit une balise <dt> avec le terme et une balise <dd> avec sa définition

var listeLiens = [
    {
        titre: "So Foot",
        url: "http://sofoot.com",
        auteur: "yann.usaille"
    },
    {
        titre: "Guide d'autodéfense numérique",
        url: "http://guide.boum.org",
        auteur: "paulochon"
    },
    {
        titre: "L'encyclopédie en ligne Wikipedia",
        url: "http://Wikipedia.org",
        auteur: "annie.zette"
    }
];

// Crée et renvoie un élément DOM affichant les données d'un lien
// Le paramètre lien est un objet JS représentant un lien
function creerElementLien(lien) {
    var titreLien = document.createElement("a");
    titreLien.href = lien.url;
    titreLien.style.color = "#428bca";
    titreLien.style.textDecoration = "none";
    titreLien.style.marginRight = "5px";
    titreLien.appendChild(document.createTextNode(lien.titre));

    var urlLien = document.createElement("span");
    urlLien.appendChild(document.createTextNode(lien.url));

    // Cette ligne contient le titre et l'URL du lien
    var ligneTitre = document.createElement("h4");
    ligneTitre.style.margin = "0px";
    ligneTitre.appendChild(titreLien);
    ligneTitre.appendChild(urlLien);

    // Cette ligne contient l'auteur
    var ligneDetails = document.createElement("span");
    ligneDetails.appendChild(document.createTextNode("Ajouté par " + lien.auteur));

    var divLien = document.createElement("div");
    divLien.classList.add("lien");
    divLien.appendChild(ligneTitre);
    divLien.appendChild(ligneDetails);

    return divLien;
}

var contenu = document.getElementById("contenu");
// Parcours de la liste des liens et ajout d'un élément au DOM pour chaque lien
listeLiens.forEach(function (lien) {
    var elementLien = creerElementLien(lien);
    contenu.appendChild(elementLien);
});

/* 
Activité 2
*/

// création d'une division rassemblant tous les éléments + création du bouton s'y trouvant au début
var zoneAjout = document.createElement("div");
    var boutonAjout = document.createElement("button");
    boutonAjout.id = "Ajouter";
    boutonAjout.textContent = "Ajouter un lien";
    zoneAjout.appendChild(boutonAjout);
document.getElementById("contenu").appendChild(zoneAjout);


// création du formulaire
var formulaireAjout = document.createElement("form");
var auteurUtilisateur = document.createElement("input");
    auteurUtilisateur.type = "text";
    auteurUtilisateur.name = "auteurForm";
    auteurUtilisateur.id = "auteurForm";
    auteurUtilisateur.focus();
    auteurUtilisateur.style.marginRight = "10px";
    auteurUtilisateur.placeholder = "Entrez votre nom";
    auteurUtilisateur.required = true;

var titreUtilisateur = document.createElement("input");
    titreUtilisateur.type = "text";
    titreUtilisateur.name = "titreForm";
    titreUtilisateur.id = "titreForm";
    titreUtilisateur.focus();
    titreUtilisateur.style.marginRight = "10px";
    titreUtilisateur.placeholder = "Entrez le titre du lien";
    titreUtilisateur.required = true;

var urlUtilisateur = document.createElement("input");
    urlUtilisateur.type = "text";
    urlUtilisateur.name = "urlForm";
    urlUtilisateur.id = "urlForm";
    urlUtilisateur.focus();
    urlUtilisateur.style.marginRight = "10px";
    urlUtilisateur.placeholder = "Entrez l'url du lien";
    urlUtilisateur.required = true;

var boutonUtilisateur = document.createElement("input");
    boutonUtilisateur.id = "boutonValid";
    boutonUtilisateur.type = "submit";
    boutonUtilisateur.value = "Envoyer";

formulaireAjout.appendChild(auteurUtilisateur);
formulaireAjout.appendChild(titreUtilisateur);
formulaireAjout.appendChild(urlUtilisateur);
formulaireAjout.appendChild(boutonUtilisateur);

// clic sur le premier bouton
boutonAjout.addEventListener("click", function disparaitreBouton() {
    boutonAjout.style.visibility = "collapse";
    zoneAjout.appendChild(formulaireAjout);
});

// Création du message d'information
 var infoElt = document.createElement("div");
    infoElt.style.backgroundColor= "#ccedf0";
    infoElt.style.height = "50px";
    infoElt.style.width = "100%";
    infoElt.style.textAlign = "center";
    infoElt.style.fontSize = "20px";
    infoElt.style.fontWeight = "bold";
    infoElt.style.color = "#428bca";
    infoElt.textContent = "Le lien \"" + lien2.titre + "\" a bien été ajouté.";

document.getElementById("boutonValid").addEventListener("submit", function (e) {
        e.preventDefault();
        var url = urlUtilisateur.value;
        // Si l'URL ne commence ni par "http://" ni par "https://"
        if ((url.indexOf("http://") !== 0) && (url.indexOf("https://") !== 0)) {
            // On la préfixe par "http://"
            url = "http://" + url;
        }
        // Création de l'objet contenant les données du nouveau lien
        var lien2 = {
            titre: titreUtilisateur.value,
            url: urlUtilisateur.value,
            auteur: auteurUtilisateur.value
        };
            var lienElt = creerElementLien(lien2);
            // Ajoute le nouveau lien en haut de la liste
            contenuElt.insertBefore(lienElt, contenuElt.firstChild);
             
            var div = document.getElementById("bouton");
            div.insertBefore(infoElt, formElt);
             
            // Suppression du message après 2 secondes
            setTimeout(function () {
            zoneBoutonElt.removeChild(infoElt);
            }, 2000);
             
            // Remplace le formulaire d'ajout par le bouton d'ajout
            zoneBoutonElt.innerHTML = "";
            zoneBoutonElt.appendChild(boutonElt);
        });

-
Edité par Fulgur59 1 juin 2016 à 17:40:14

bonjour Fulgur59

Il faut peut-être ecouter validateFormulaire(e){}

https://openclassrooms.com/courses/creez-des-pages-web-interactives-avec-javascript/reagissez-a-des-evenements-1

bonne recherche.

bonjour lvdesign,

Merci pour le message je suis en train de chercher mais je galère un peu

AURELIEBONET a écrit:

moi j'ai eu ce problème et pour que ça fonctionne je ne l'ai pas mis dans <Directory />

Dans Apache -> modules Apache -> sélectionner headers_module

Ensuite dans http.conf dans <IfModule headers_module> j'ai rajouté  Header always set Access-Control-Allow-Origin "*"

Bonjour !

Lors du tout premier essai qui se trouve au début de la partie "Interroger un serveur web", j'ai toujours le code erreur

XMLHttpRequest cannot load http://localhost:8888/javascript-web-srv/data/langages.txt. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Malgré les bons conseils du cours et ceux qui se trouvent ci-dessus, ça ne fonctionne pas.

J'ai ajouté la ligne dans le fichier httpd.conf dans la balise <Directory /> mais rien n'y fait. Je n'ai pas trouvé la balise <IfModule headers_module>.

Je travaille sur Mac OS Yosemite avec MAMP. J'ai deux fichiers httpd.conf et je les ai modifiés tous les deux.

Je ne vois absolument pas quoi faire. Donc merci pour toutes les suggestions qui pourraient me sortir de cette situation ...

bonjour makastreet

J'ai eu ce problème et chez moi avec Firefox 46.0.1, le code marche sans changer la config apache

Marche pas Pas avec Chrome, ni Safari.  

sinon mettre un fichier .htaccess avec le code ci-dessous (à retrouver dans htmlboilerplate : https://github.com/h5bp/html5-boilerplate/blob/5.3.0/dist/doc/TOC.md )dans le dossier javascript-web-srv/

# Apache Server Configs v2.14.0 | MIT License
# https://github.com/h5bp/server-configs-apache

# (!) Using `.htaccess` files slows down Apache, therefore, if you have
# access to the main server configuration file (which is usually called
# `httpd.conf`), you should add this logic there.
#
# https://httpd.apache.org/docs/current/howto/htaccess.html.

# ######################################################################
# # CROSS-ORIGIN                                                       #
# ######################################################################

# ----------------------------------------------------------------------
# | Cross-origin requests                                              |
# ----------------------------------------------------------------------

# Allow cross-origin requests.
#
# https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
# http://enable-cors.org/
# http://www.w3.org/TR/cors/

<IfModule mod_headers.c>
    Header always set Access-Control-Allow-Origin "*"
</IfModule>

bonne suite

Toujours le même problème sur mon code :$ qqn peut-il m'aider ?

@lvdesign : je n'ai pas trouvé

bonjour Fulgur59

Peut-etre faut il repartir de zéro et re-installer Mamp pour tester ces solutions avec une config propre. J'utilise Mamp moi aussi, je suis sous osx 10.6.

Je n'ai pas réussi à mettre en action ce que proposait le cours. J'ai essayé plusieurs navigateurs et seul Firefox passait outre ce message.

bonne suite

Bonjour,

Petit soucis de paramètrage sous ubuntu 14.04:

J'ajoute bien dans la <directory />

# Allow cross-domain requests

Header always set Access-Control-Allow-Origin "*"

Mais le résultat ne fonctionne pas

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

cours.js:6 XMLHttpRequest cannot load http://localhost/javascript-web-srv/data/langages.txt. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.(anonymous function) @ cours.js:6

Merci pour votre aide.

Philippe

re,

j'ai trouvé la solution

https://harthur.wordpress.com/2009/10/15/configure-apache-to-accept-cross-site-xmlhttprequests-on-ubuntu/

Sujet résolu.

-
Edité par Philippedu06 2 juin 2016 à 15:01:27

Bonjour,

Juste pour vous signaler une petite coquille dans le formulaire d'exemple du chapitre 6 "Manipulez les formulaires".

Il manque la lettre "r" au mot "cours" dans :

<script src="../js/cous.js"></script>

Cordialement.

makastreet a écrit:

AURELIEBONET a écrit:

moi j'ai eu ce problème et pour que ça fonctionne je ne l'ai pas mis dans <Directory />

Dans Apache -> modules Apache -> sélectionner headers_module

Ensuite dans http.conf dans <IfModule headers_module> j'ai rajouté  Header always set Access-Control-Allow-Origin "*"

Bonjour !

Lors du tout premier essai qui se trouve au début de la partie "Interroger un serveur web", j'ai toujours le code erreur

XMLHttpRequest cannot load http://localhost:8888/javascript-web-srv/data/langages.txt. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Malgré les bons conseils du cours et ceux qui se trouvent ci-dessus, ça ne fonctionne pas.

J'ai ajouté la ligne dans le fichier httpd.conf dans la balise <Directory /> mais rien n'y fait. Je n'ai pas trouvé la balise <IfModule headers_module>.

Je travaille sur Mac OS Yosemite avec MAMP. J'ai deux fichiers httpd.conf et je les ai modifiés tous les deux.

Je ne vois absolument pas quoi faire. Donc merci pour toutes les suggestions qui pourraient me sortir de cette situation ...

Hello !

Afin de remédier à mon soucis, j'ai réinstallé MAMP (je suis sous Mac) et j'ai installé Firefox. J'ai alors inséré la ligne manquante dans le fichier de configuration tel que c'est décrit dans le cours. Et maintenant, youpie, ça fonctionne.

Merci pour tous vos conseils, et spécialement à lvdesign !

Allez zou, je m'y remets !

Bonjour,

Comme ce n'est pas précisé (comme dans l'activité 1), a t'on le droit de modifier les fichiers HTML et CSS dans l'activité n°2 (Gérez l'ajout de nouveau lien) ?  J'ai réussi à faire ce qui est demandé, mais j'ai ajouté le bouton, le message de 2 secondes, et le formulaire dans les pages HTML et CSS, et dans le fichier Javascript, je modifie la propriété CSS pour les afficher ou les masquer.

Donc, faut-il nécessairement créer ces éléments en Javascript ? 

Bonjour Frédéric, 

Je ne les ai pas modifié de mon côté. Mais je galère vraiment beaucoup pour faire ça qu'avec Javascript (pas encore réussi ). Ce n'est pas précisé sur l'activité donc je pense que je vais modifié HTML et CSS. Lorsque que tu corrigeras, tu pourras nous dire si oui ou non, on peut modifier ?

Bonjour,

le but des TP est de modifier à partir de javascript et de laisser le code des fichiers html et css tel quel.

A+

-
Edité par Philippe2463 2 juin 2016 à 17:10:10

Merci pour ta réponse, Philippe.

-
Edité par Friedrich von Schlickling 2 juin 2016 à 17:14:10

bonjour FrédéricBalland

Normalement et en lisant bien l'énoncé qui dit de partir du fichier de l'activité 1

mais dans la correction ce n'est pas le cas : 

<body>
    <h1>Activité 2</h1>

    <p>
        <button id="ajoutLien">Ajouter un lien</button>
    </p>
    
    <!-- Les nouveaux éléments sont ajoutés dans cette balise -->
    <div id="contenu">
    </div>

    <script src="../js/liensweb.js"></script>
</body>

Donc à vous de voir. Evidement, c'est plus sport de recréer cette balise…

Fulgur, ton code affiche le bouton et le formulaire après la liste des liens de l'activité 1 et non avant !

Alors, soit tu fais comme j'ai d'abord fait en déplaçant le bout de code ci-dessous après la création de tes éléments. Mais, je pense qu'il est interdit de déplacer du code de l'activité 1. Ou alors, tu fais comme je viens de trouver, c'est à dire en insérant tes éléments avant les liens existants, avec l'instruction qui va bien.

Sinon, la validation du formulaire ne fonctionne pas à cause de : infoElt.textContent = "Le lien \"" + lien2.titre + "\" a bien été ajouté.";

En effet, tu définis le contenu du message alors que l'élément lien2 est créé ensuite.

Fulgur59 a écrit:

Bonjour, 

J'ai un problème sur l'activité 2. Je n'arrive pas à afficher les résultats du formulaire

Voilà mon code :

var contenu = document.getElementById("contenu");
// Parcours de la liste des liens et ajout d'un élément au DOM pour chaque lien
listeLiens.forEach(function (lien) {
    var elementLien = creerElementLien(lien);
    contenu.appendChild(elementLien);
});

/* 
Activité 2
*/

-
Edité par Friedrich von Schlickling 2 juin 2016 à 19:47:31

Pas eu de réponse à mon message.

Quelqu'un aurait-il un conseil ?

celineg a écrit:

Pas eu de réponse à mon message.

Quelqu'un aurait-il un conseil ?

celineg a écrit:

Pas eu de réponse à mon message.

Quelqu'un aurait-il un conseil ?

Toutes les instructions dont tu as besoin sont là et sont justes. Je pense que le fait que ça coince c'est simplement une question d'organisation logique du code. Déjà comme le souligne Philippe2463 mieux ne vaut pas déclarer ta fonction remplacement() dans ta boucle for. Et au lieu d'écrire une fonction spécifique au remplacement du bouton par la réponse, j'opterai plus pour une fonction globale qui crée l'ensemble des éléments question / bouton / gestionnaire d'évênement / réponse. Et qui soit ensuite exécutée autant de fois qu'il y a de questions par une boucle for. Du coup si on reste sur ton idée d'avoir une fonction nommée remplacement() tu pourrais structurer ton code comme ça :

function remplacement(i) {
    var contenu = document.getElementById("contenu");
    var bouton = document.createElement("button");
    bouton.textContent = "Afficher la réponse"
 
// appenchild
     
    var strong = contenu.appendChild(document.createElement("strong"));
    strong.appendChild(document.createTextNode("Question " + (i+1) + " : "));
     
    contenu.appendChild(document.createTextNode(questions[i].enonce));
    contenu.appendChild(document.createElement("br"));
    contenu.appendChild(bouton);
    contenu.appendChild(document.createElement("br"));
    contenu.appendChild(document.createElement("br"));
     
// Evénement
    bouton.addEventListener("click", function() {
    	contenu.replaceChild(document.createTextNode(questions[i].reponse), bouton);
    });
};

// boucle for  
for (var i = 0; i<questions.length; i++) {
	remplacement(i)
  };

Bonjour,

Je trouve la question 6 du dernier quiz ambiguë :

" On peut effectuer des requêtes HTTP cross-domain en s'authentifiant avec une clé d'accès."  Vrai / Faux

La phrase est vraie : il est possible de faire une requête cross-domain qui demande une clé d'accès.  Les deux concepts sont distincts, mais on peut utiliser les deux en même temps.

Je propose que la question devienne :

" On doit effectuer des requêtes HTTP cross-domain en s'authentifiant avec une clé d'accès."  Vrai / Faux

Alors la réponse n'aura plus d’ambiguïtée.

Merci MTovmassian !

C'est super clair !!! J'aimerais bien pouvoir structurer tout ça  dans ma tête comme tu le fais :-)

Bonjour,

j'étudie le chapitre animez vos page. Et j'ai écris un code pour faire le chronomètre.

lorsque je charge la page et que je clic sur le bouton le chronomètre se lance pas de souci. Puis je l’arrête et ça fonctionne encore.

  Par contre des que je le relance une nouvelle fois, il se relance mais l'affichage ne respect plus du tous le changement toutes les secondes.

c'est un peu comme si cela lançait la fonction plusieurs fois.

voici le code html :

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    
    <title>chronometre</title>
</head>
    
<body>
    
    <button name="bouton" id="bouton">demarrer le chronometre</button>
    <div id="contenu"></div>
    <script src="../js/chrono.js"></script>
    
</body>
</html>

et voici le code javascript :

// initialisation variable

var contenuElt = document.getElementById("contenu"); 

var compteur = 0; //creation de la variable qui contient le nombre de seconde passé
var valeurBouton = false; //variable contenant la valeur d'arret ou de demarage du bouton


// function ajouter 1 au compteur et afficher la nouvelle valeur

function ajoutSeconde() {

    if (valeurBouton) { // si l'on demarre le chronometre

        compteur ++; // ajout un au compteur
        contenuElt.innerHTML = "";
        contenuElt.textContent = compteur + " seconde"; // affichage du temps passé
        

    } else { //si l'on arrte le compteur

        clearInterval(compteurTemps);
    }

}



document.getElementById("bouton").addEventListener("click", function (e) { // quand on click sur bouton

    valeurBouton = !valeurBouton;  // on change la valeur de valeur bouton
    var compteurTemps = setInterval(ajoutSeconde, 1000); // lancement toutes les seconde de la fonction ajoutSeconde
    

});

est ce que quelqu'un pourrais me guider pour corriger mon code, il y a quelque chose qui doit m'échapper dans le fonctionnement de setInterval()

Merci d'avance

NicolasFD a écrit:

Bonjour,

j'étudie le chapitre animez vos page. Et j'ai écris un code pour faire le chronomètre.

lorsque je charge la page et que je clic sur le bouton le chronomètre se lance pas de souci. Puis je l’arrête et ça fonctionne encore.

  Par contre des que je le relance une nouvelle fois, il se relance mais l'affichage ne respect plus du tous le changement toutes les secondes.

c'est un peu comme si cela lançait la fonction plusieurs fois.

voici le code html :

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    
    <title>chronometre</title>
</head>
    
<body>
    
    <button name="bouton" id="bouton">demarrer le chronometre</button>
    <div id="contenu"></div>
    <script src="../js/chrono.js"></script>
    
</body>
</html>

et voici le code javascript :

// initialisation variable

var contenuElt = document.getElementById("contenu"); 

var compteur = 0; //creation de la variable qui contient le nombre de seconde passé
var valeurBouton = false; //variable contenant la valeur d'arret ou de demarage du bouton


// function ajouter 1 au compteur et afficher la nouvelle valeur

function ajoutSeconde() {

    if (valeurBouton) { // si l'on demarre le chronometre

        compteur ++; // ajout un au compteur
        contenuElt.innerHTML = "";
        contenuElt.textContent = compteur + " seconde"; // affichage du temps passé
        

    } else { //si l'on arrte le compteur

        clearInterval(compteurTemps);
    }

}



document.getElementById("bouton").addEventListener("click", function (e) { // quand on click sur bouton

    valeurBouton = !valeurBouton;  // on change la valeur de valeur bouton
    var compteurTemps = setInterval(ajoutSeconde, 1000); // lancement toutes les seconde de la fonction ajoutSeconde
    

});

est ce que quelqu'un pourrais me guider pour corriger mon code, il y a quelque chose qui doit m'échapper dans le fonctionnement de setInterval()

Merci d'avance

A  mon avis les deux petits soucis qui font que ca bloque viennent du fait que ta variable compteurTemps soit déclarée à l'intérieur de ton gestionnaire d’événement et non comme une variable globale, et de ton test conditionnel de valeurBouton qui devrait plutôt se faire lui pour le coup dans ton gestionnaire d’événement que dans une fonction. Tu peux essayer de procéder comme ça:

var contenu = document.getElementById("contenu")
var compteurTemps = null;
var compteur = 0;
var valeurBouton = false;

function ajouteSeconde() {
		compteurTemps = setInterval(function() {
    	compteur ++;
    	contenu.textContent = compteur + " seconde"; 
    }, 1000);
}


document.getElementById("bouton").addEventListener("click", function() {
	valeurBouton = !valeurBouton
  if(valeurBouton === true) {
		ajouteSeconde();
	} else {
  	clearInterval(compteurTemps);
  }
})

Martin Tovmassian a écrit:

A  mon avis les deux petits soucis qui font que ca bloque viennent du fait que ta variable compteurTemps soit déclarée à l'intérieur de ton gestionnaire d’événement et non comme une variable globale, et de ton test conditionnel de valeurBouton qui devrait plutôt se faire lui pour le coup dans ton gestionnaire d’événement que dans une fonction. Tu peux essayer de procéder comme ça:

var contenu = document.getElementById("contenu")
var compteurTemps = null;
var compteur = 0;
var valeurBouton = false;

function ajouteSeconde() {
		compteurTemps = setInterval(function() {
    	compteur ++;
    	contenu.textContent = compteur + " seconde"; 
    }, 1000);
}


document.getElementById("bouton").addEventListener("click", function() {
	valeurBouton = !valeurBouton
  if(valeurBouton === true) {
		ajouteSeconde();
	} else {
  	clearInterval(compteurTemps);
  }
})

merci en effet ta solution marche. J'ai passé setInterval() dans dans la fonction et les condition dans les gestionnaire d'évènement.

j'ai regardé la solution, et setInterval() est bien dans le gestionnaire d'évènement.

Si quelqu'un à une explication pour que je ne reproduise pas la même erreur, ça m’intéresse.