Je ne sais pas compter des variables dans des onClick en jQuery

Par lululink, il y a 7 ans

Javascript

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

Pierrot01, il y a 7 ans

il me semble t'avoir donner la réponse hier ;)
plutôt que de virer le post, demande plus de renseignements.

@plus

Pierre

lululink, il y a 7 ans

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.

Pierrot01, il y a 7 ans

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éponses

voilou, ça devrait fonctionner comme ça

@pluche

Pierre

lululink, il y a 7 ans

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

Lartak, il y a 7 ans

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 ?

lululink, il y a 7 ans

Merci, ça fonctionne très bien !
Je ne sais pas pourquoi j'ai mis tout ça dans des formulaires.

Lartak, il y a 7 ans

Pour simplifier ton code JavaScript, tu peux même faire quelque chose comme ceci.

lululink, il y a 7 ans

Merci @Lartak, c'est vrai qu'il y a moins de code mais c'est loin d'être de mon niveau.