Bug de remise à 0 (JQuery)

Résolu/Fermé

Nirsab Messages postés 78 Date d'inscription samedi 17 juillet 2021 Statut Membre Dernière intervention 8 août 2022 - 1 août 2022 à 16:08
Nirsab Messages postés 78 Date d'inscription samedi 17 juillet 2021 Statut Membre Dernière intervention 8 août 2022 - 2 août 2022 à 15:52

Salutations,

Je suis en train de terminer un programme. Tout fonctionne comme je le souhaite mais un bug me résiste:

Je ne parviens pas à faire en sorte que le compte à rebours redémarre à 50s, lorsque que l'on choisi un nouveau thème.

Where is la coquille, svp ?

$(document).ready(function () {//n'apparait qu'une fois//

                var chrono; // gestion du chrono
                var decompteLance = 'non'; // pour empêcher le bouton Question de lancer plusieurs fois le chrono
                var aleatoire; // nombre aléatoire
                var themes = []; // affichage de 4 thèmes aléatoires
                var numTheme = ''; // thème choisit
                var questions = []; // questions déjà posées
                var precedente = null; // question/réponse précédente

                

                // Affichage de 4 thèmes aléatoires
                $('#themesAleatoires').on('click', function () {
                    $('#themes').text(''); // vide la liste des thèmes
                    themes = []; // vide le tableau de mémorisation des thèmes
                    choixThemes(); // recherche 4 thèmes de façon aléatoire
                    afficheThemes(); // affiche les 4 thèmes
                });

                // Choix d'un thème particulier (grise le bouton et le desactive)
                // la syntaxe d'appel est différente car les boutons de choix n'existent pas encore au chargement de la page
                $(document).on('click', '.choisirTheme', function () {
                    numero = $(this).attr('value');
                    numTheme = themes4alasuite[numero][0]; // mémorise le numéro du thème choisit
                    theme = themes4alasuite[numero][1]; //
                    $('#theme').text('THEME : ' + theme); // affiche le thème choisi en-dessous du bouton Question
                    $(this).css('background-color', 'grey'); // colore le bouton en gris
                    $(this).attr('disabled', 'disabled'); // désactive le bouton
                });

                $('#questionButton').on('click', function () {
                    if (numTheme === '') {
                        alert("Choisissez d'abord un thème");
                    } else {
                        if (decompteLance === 'non') {
                            $secondes = 50; // définit le nombre de secondes
                            $('#countdown_sec').text($secondes); //affiche 50 dans le chrono
                            timerManager.start($secondes); // lance le timer
                            decompteLance = 'oui';
                            
                        }
                        $("#reponse").text(""); 
                        question();
                    }
                });

                
               

                // Ajoute des points à une équipe
                $('.compteur').on('click', function (e) {
                    e.preventDefault();
                    $val = $(this).attr('value').split('|');
                    $champ = '#compteur' + $val[0];
                    $new_score = parseInt($($champ).text()) + parseInt($val[1]);
                    if ($new_score < 0) {
                        $('#compteur' + $val[0]).text('0');
                    } else if ($new_score <= 3) {
                        $('#compteur' + $val[0]).text($new_score);
                    } else {
                        $('#compteur' + $val[0]).text('ÉQUIPE QUALIFIÉE')
                       
                    }

                });

                // Remet le nombre de points d'une équipe à zéro
                $('.mise0').on('click', function () {
                    $val = $(this).attr('value').split('|');
                    $champ = '#compteur' + $val[0];
                    console.log("CHAMP", $champ);
                    $($champ).text('0');
                });

                // Recherche 4 thèmes de façon aléatoire
                function choixThemes() {
                    var min = 0;
                    var max = 20;
                    aleatoire = Math.floor(Math.random() * (max - min)) + min; // cherche un nombre aléatoire
                    if ($.inArray(parseInt(aleatoire), themes) === -1) { // si le numéro de la question ne figure pas dans le tableau des questions déjà posées
                        themes.push(aleatoire); // rempli le tableau des thèmes déjà choisis
                    }
                    if (themes.length < 4) { // relance la function tant qu'on n'a pas 4 thèmes
                        choixThemes();
                    }
                }

                // Affiche, sous forme de boutons, les thèmes trouvés
                function afficheThemes() {
                    $.each(themes, function (index, value) {
                        
                        $('#themes').append('<button class="btn btn-danger choisirTheme" value="' + value + '" type="button" >');
                        $('#themes').append(' ' + themes4alasuite[value][1] + '</br>');
                        $('#themes').append('</button>');
                        
                    });
                }

                // Affiche une question aléatoire dans le thème choisi
                function question() {
                    var min = 0;
                    var max = 11;
                    aleatoire = Math.floor(Math.random() * (max - min)) + min; // cherche un nombre aléatoire
                    if (questions.length === max) {
                        alert('Toutes les questions ont été posées !');
                    } else if ($.inArray(parseInt(aleatoire), questions) === -1) { // si le numéro de la question ne figure pas dans le tableau des questions déjà posées
                        quest = listeQuestions[numTheme][aleatoire][1];
                        $('#question').text(quest); // affiche la nouvelle question
                        questions.push(random); // rempli le tableau des questions déjà posées
            console.log(questions);
           

            
          } else {
            // rappelle la fonction pour trouver un nouveau nombre aléatoire non utilisé
            
          }
        }
        $("#reponseButton").on("click", function () {
          $("#reponse").text(listeQuestions[numTheme][aleatoire][2]); // affiche la réponse
          
             });



             $('#stopChrono').on('click', function () {
                $("#countdown_sec").text("0");
                timerManager.stop("0")
             });





                // A corriger
                
                // Le  chrono s'enclenche donc dès que l'on pose la première question
                
                

                timerManager = {
                    start: function ($secondes) {
                        $secondes = $secondes - 1; // provoque le décompte
                        if ($secondes >= 0) { // tant que le chrono est supérieur à zéro
                            chrono = setTimeout(function () { // éxécute le code toutes les 1000 millisecondes
                                $('#countdown_sec').text($secondes); // affiche le temps restant
                                timerManager.start($secondes); // rappelle la fonction
                            }, 1000);
                        } else {
                            timerManager.stop(); // arrête le chrono
                        }
                    },
                    stop: function () { // to be called when you want to stop the timer
                        clearTimeout(chrono);
                        $('#countdown_sec').text('0');
                    }
                };

Merci.

A voir également:

Bug de remise à 0 (JQuery)
Remise a zero pc - Guide
Bug yahoo mail - Guide
Bug musique instagram ✓ - Forum Instagram
Iptv bug forum - Forum Box et Streaming vidéo
Remise à zéro iphone - Guide

2 réponses

Réponse 1 / 2

Totoro
Modifié le 2 août 2022 à 15:27

Salut, dur de dire quoi que ce soit sans savoir ce que vous voulez faire et voir le HTML concerné.

Pour le décompte c'est simple il n'y en a pas puisque vous utilisez un setTimeout d'eune valeur de 1000 ms

 
<span>setTimeout</span><span>(</span><span>function</span> <span>()</span> <span>{</span> <span>// éxécute le code toutes les 1000 millisecondes</span>
                                $<span>(</span><span>'#countdown_sec'</span><span>).</span><span>text</span><span>(</span>$secondes<span>);</span> <span>// affiche le temps restant</span>
                                timerManager<span>.</span><span>start</span><span>(</span>$secondes<span>);</span> <span>// rappelle la fonction</span>
                            <span>}</span><span>,</span> <span>1000</span><span>);</span>

Si vous voulez un décompte il faut donc rajouter une variable qui fait le décompte à mettre dans la boucle du setTimeout (voir requestAnimationFrame qui est beaucoup plus performant et pratique à utiliser sinon).

Euh rien ne vous choque ici, étonant que vous n'ayez pas d'erreur:

function choixThemes() {
                    var min = 0;
                    var max = 20;
                    aleatoire = Math.floor(Math.random() * (max - min)) + min; // cherche un nombre aléatoire
                    if ($.inArray(parseInt(aleatoire), themes) === -1) { // si le numéro de la question ne figure pas dans le tableau des questions déjà posées
                        themes.push(aleatoire); // rempli le tableau des thèmes déjà choisis
                    }
                    if (themes.length < 4) { // relance la function tant qu'on n'a pas 4 thèmes
                        choixThemes();
                    }
                }

Une fonction qui s'appelle elle même? La récursivité à ses limites.

ps: je ne vois pas l'utilité de JQuery ici puisque vous ne faites appel qu'au sélecteurs JQuery ni des variables JQuery. Le seul résultat que vous obtenez(sans parler de la mémoire) est de ralentir le chargement de votre page et le le temps d’exécution(en passant par $maVariable et la boucle JQuery) par rapport à du pur JavaScript qui ne demanderait qu'un changement minime de syntaxe sur votre code(écrire vos sélecteurs en vanilla JS donc). Et bon du délai dans le temps d'exécution sur un chrono précis au millième de secondes ça paraît pas fameux surtout que ça peut facilement être évité ici.

Réponse 2 / 2

Nirsab Messages postés 78 Date d'inscription samedi 17 juillet 2021 Statut Membre Dernière intervention 8 août 2022
Modifié le 2 août 2022 à 15:54

<!DOCTYPE html>
<html>
    <head>
        <title>Questions pour un Champion</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
    </head>
    <body>
        <div class="container-fluid">

            <div class="row">
                <div class="col">
                    <div class="alert alert-danger" role="alert" style="text-align: center;font-weight: bold;">
                        <h1>MAX À LA SUITE</h1>
                        <button class="btn btn-warning" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                            <i class="fas fa-hand-sparkles"></i> Règles
                        </button><br/>
                        <div class="collapse" id="collapseExample" style="margin-top: 10px">
                            <div class="alert alert-warning" style="text-align: justify">
                                4 thèmes sont proposées. L'équipe éliminée à la manche précédente choisira le thème pour chaque équipe en course. Les joueurs de l'équipe répondront à tour de rôle.
                                Les questions sont posées aléatoirement. Chaque réponse apporte 1 point. En cas de mauvaise réponse, le score retombe à 0 et ne sera conservé que le score final. Le but est d'avoir
                                le maximum de points possibles (jusqu'à 11), le tout en 50 secondes ou moins. En cas d'égalité, un jeu décisif aléatoire sera proposé. Les 2 équipes
                                ayant réalisé les meilleures performances seront qualifiées pour la manche finale.
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="row">
                <div class="col">
                    <button id="themesAleatoires" class="btn btn-info" type="button"><i class="fas fa-list-ol"></i> 4 Thèmes</button>
                    <br/><br/>
                    <div id="themes"></div>
                </div>
                <div class="col">
                    <table class="table table-striped table-bordered">
                        <thead>
                            <tr class="table-success">
                                <th>ÉQUIPES QUALIFIÉES + JOUEUR A, B, C</th>
                                <th>SCORE</th>
                                <th>COMPTEUR</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1ère Equipe Qualifiée
                                    <input></td>
                                <td><span id="compteur1"><b>0</b></span></td>
                                <td>
                                    <button class="btn btn-success compteur" value="1|1" type="button"><i class="fas fa-plus"></i> 1</button> 
                                    <button class="btn btn-danger mise0" value="1|0" type="button"><i class="fab fa-creative-commons-zero"></i></button>
                                </td>
                            </tr>
                            <tr>
                                <td>2ème Equipe Qualifiée
                                    <input></td>
                                <td><span id="compteur2"><b>0</b></span></td>
                                <td>
                                    <button class="btn btn-success compteur" value="2|1" type="button" ><i class="fas fa-plus"></i> 1</button> 
                                    <button class="btn btn-danger mise0" value="2|0" type="button"><i class="fab fa-creative-commons-zero"></i></button>
                                </td>
                            </tr>
                            <tr>
                                <td>3ème Equipe Qualifiée
                                    <input></td>
                                <td><span id="compteur3"><b>0</b></span></td>
                                <td>
                                    <button class="btn btn-success compteur" value="3|1" type="button"><i class="fas fa-plus"></i> 1</button> 
                                    <button class="btn btn-danger mise0" value="3|0" type="button"><i class="fab fa-creative-commons-zero"></i></button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="row">
                <div class="col">
                    <div id="theme" class="alert alert-primary" role="alert">Thème...</div>
                    <table class="table table-borderless">
                        <tbody>
                            <tr>
                                <td><button id="questionButton" class="btn btn-warning" type="button"><i class="far fa-comment-dots"></i> Question</button></td>
                                <td><div id="question"></div></td>
                            </tr>
                            <tr>

                                <td><button id="reponseButton" class="btn btn-primary" type="button"><i class="far fa-lightbulb"></i> Réponse</button></td>

                                <td><div id="reponse"></div></td>
                                <td><button id="stopChrono" class="btn btn-primary" type="button" style="background-color:red;"><i class="far fa-stop-circle"></i> Stop</button></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="col">
                    <div class="alert alert-danger" role="alert" style="text-align:center;">
                        <b>Temps restant :</b>
                    </div>
                    <div class="jumbotron" style="text-align:center;font-size:2em;font-weight:bold">
                        <span id="countdown_sec">0 secondes</span>
                    </div>
                </div>
            </div>
            <div>
                <div class="col">
                    <table class="table table-borderless">
                        <tbody>
                            </div>
                </div>
            </div>
            
        </div>

Merci pour la réponse. Comme dit, en soit tout le code fonctionne à l'exception de ce détail énoncé dans le premier message. Voici le HTML...

(je crois que vous vous êtes trompés dans les balises de codes ;)

Discussions similaires

javascript:void(0);

comment faire "différent de" sous excel/

Problème Facebook rencontre

faire afficher "0" à la place de #N/A

algorithme résoudre ax²+bx+c=0

Discussions similaires

Newsletters