Bug de remise à 0 (JQuery)
Résolu
Nirsab
Messages postés
78
Date d'inscription
Statut
Membre
Dernière intervention
-
Nirsab Messages postés 78 Date d'inscription Statut Membre Dernière intervention -
Nirsab Messages postés 78 Date d'inscription Statut Membre Dernière intervention -
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.
N
A voir également:
- Bug de remise à 0 (JQuery)
- Remise a zero pc - Guide
- Numéro de téléphone excel 0 - Guide
- Remise a zero chromecast - Guide
- Iptv bug forum ✓ - Forum Box et Streaming vidéo
- Acpi\int33a0\0 ✓ - Forum Pilotes (drivers)
2 réponses
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.
<!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 ;)
