Je ne sais pas compter des variables dans des onClick en jQuery
Bonjour,
Débutant en jQuery, je rencontre un petit problème avec mon code.
Je souhaite faire un QCM qui compte le nombre d'erreures que l'on fait sauf que je ne sais pas comment m'y prendre
Voici mes codes :
<h1>Comment je m'appelle ?</h1>
<form>
<button id="rUne" type="reset" class="q1">Jean</button>
<button id="rDeux" type="reset" class="q1">Yves</button>
<button id="rTrois" type="reset" class="q1">Lucas</button>
<button id="rQuatre" type="reset" class="q1">Ylann</button>
</form>
<h2><span id="erq1"> </span></h2>
<h1>J'ai quel âge ?</h1>
<form>
<button id="r1q2" type="reset" class="q2">16</button>
<button id="r2q2" type="reset" class="q2">13</button>
<button id="r3q2" type="reset" class="q2">11</button>
<button id="r4q2" type="reset" class="q2">12</button>
</form>
<h2><span id="erq2"> </span></h2>
<h2>Nombre total d'erreures : <span id="ertotal"></span></h2>$(document).ready(function() {
var rune = $('#rUne');
var rdeux = $('#rDeux');
var rtrois = $('#rTrois');
var rquatre = $('#rQuatre');
var btnq1 = $('.q1')
var erq1 = $('#erq1');
rune.on('click', () => {
rune.addClass('wrong');
erq1.text('Faux');
btnq1.prop("disabled", true);
});
rdeux.on('click', () => {
rdeux.addClass('wrong');
erq1.text('Faux');
btnq1.prop("disabled", true);
});
rtrois.on('click', () => {
rtrois.addClass('true');
erq1.text('Vrai')
btnq1.prop("disabled", true);
});
rquatre.on('click', () => {
rquatre.addClass('wrong');
erq1.text('Faux');
btnq1.prop("disabled", true);
});
var r1q2 = $('#r1q2');
var r2q2 = $('#r2q2');
var r3q2 = $('#r3q2');
var r4q2 = $('#r4q2');
var btnq2 = $('.q2');
var erq2 = $('#erq2');
r1q2.on('click', () => {
r1q2.addClass('wrong');
erq2.text('Faux');
btnq2.prop("disabled", true);
});
r2q2.on('click', () => {
r2q2.addClass('wrong');
erq2.text('Faux');
btnq2.prop("disabled", true);
});
r3q2.on('click', () => {
r3q2.addClass('wrong');
erq2.text('Faux');
btnq2.prop("disabled", true);
});
r4q2.on('click', () => {
r4q2.addClass('true');
erq2.text('Vrai');
btnq2.prop("disabled", true);
});
var ertotal = $('#ertotal');
});.wrong {
background-color: red;
}
.true {
background-color: green;
}Quelqu'un pourrait m'aider s'il vous plaît ?
Cordialement.
8 réponses
Bonjour.
Tu n'as pas besoin de faire ça.
Il te suffit de définir une variable qui a comme valeur par défaut à 0, puis de l'incrémenter à chaque fois que l'utilisateur clique sur une mauvaise réponse.
Soit par exemple :
var errors = 0, ertotal = $('#ertotal');
// ...
rune.on('click', () => {
rune.addClass('wrong');
errors++;
ertotal.text(errors);
erq1.text('Faux');
btnq1.prop("disabled", true);
});
// ...Par contre, pourquoi est-ce que tu crées des formulaires pour n'y placer que des button, de plus de type reset ?
il me semble t'avoir donner la réponse hier ;)
plutôt que de virer le post, demande plus de renseignements.
@plus
Pierre
J'avais validé la réponse alors qu'elle ne fonctionnait pas ducoup j'ai re-créer le sujet et ait supprimé l'ancien.
Ce que tu m'avais proposé ne me convenait pas car je voulais que dès que l'on clique sur une proposition toutes les propositions ne peuvent plus être cliquables ce qui était plus possible avec ta méthode. Et puis ça comptait les boutons et non les fausses réponses.
Salout,
Oki, pourtant, cette solution fonctionnait ;)
Pas grave, en voila une autre :
r1q2.on('click', () => {
r1q2.addClass('wrong');
r1q2.addClass('rf'); // pour réponse fausse
erq2.text('Faux');faire ca à tous les boutons fausses réponses
et
$('.rf').length; // nombre de fausse réponsesvoilou, ça devrait fonctionner comme ça
@pluche
Pierre
C'est bizarre, j'ai essayé ce que tu m'as proposé mais ça ne fonctione pas. Voici mon nouveau code :
$(document).ready(function() {
var rune = $('#rUne');
var rdeux = $('#rDeux');
var rtrois = $('#rTrois');
var rquatre = $('#rQuatre');
var btnq1 = $('.q1')
var erq1 = $('#erq1');
rune.on('click', () => {
rune.addClass('wrong');
rune.addClass('rf');
erq1.text('Faux');
btnq1.prop("disabled", true);
});
rdeux.on('click', () => {
rdeux.addClass('wrong');
rdeux.addClass('rf');
erq1.text('Faux');
btnq1.prop("disabled", true);
});
rtrois.on('click', () => {
rtrois.addClass('true');
erq1.text('Vrai')
btnq1.prop("disabled", true);
});
rquatre.on('click', () => {
rquatre.addClass('wrong');
rquatre.addClass('rf');
erq1.text('Faux');
btnq1.prop("disabled", true);
});
var r1q2 = $('#r1q2');
var r2q2 = $('#r2q2');
var r3q2 = $('#r3q2');
var r4q2 = $('#r4q2');
var btnq2 = $('.q2');
var erq2 = $('#erq2');
r1q2.on('click', () => {
r1q2.addClass('wrong');
r1q2.addClass('rf');
erq2.text('Faux');
btnq2.prop("disabled", true);
});
r2q2.on('click', () => {
r2q2.addClass('wrong');
r2q2.addClass('rf');
erq2.text('Faux');
btnq2.prop("disabled", true);
});
r3q2.on('click', () => {
r3q2.addClass('wrong');
r3q2.addClass('rf');
erq2.text('Faux');
btnq2.prop("disabled", true);
});
r4q2.on('click', () => {
r4q2.addClass('true');
erq2.text('Vrai');
btnq2.prop("disabled", true);
});
/* Le code qui suit est nouveau, tout le reste n'a pas changé mis à part les addClass('rf') */
var ertotal = $('#ertotal');
$('.rf').length;
ertotal.text($('.rf').length);
});J'ai essayé de mettre une classe rf en CSS mais rien ne va.
Lulu
Merci, ça fonctionne très bien !
Je ne sais pas pourquoi j'ai mis tout ça dans des formulaires.
Merci @Lartak, c'est vrai qu'il y a moins de code mais c'est loin d'être de mon niveau.