Bonjour,

je rencontre des problèmes en JS. J'ai créé 3 formulaires: dans les 2 premiers un seul choix possible, dans le troisième, on peut faire plusieurs choix. Chaque choix correspond à une valeur qui fait avancer une barre de progression. J'ai réussi à créer 3 fonctions différentes mais du coup, la valeur ne s'ajoute pas à tous les choix. Merci de votre aide.

  <form >

        <input onclick="modif(40)" type="radio" name="gender" value="40" > Consigne 1: Lis le texte et la carte mentale pour les comprendre<br>
        <input onclick="modif(20)" type="radio" name="gender" value="20" > Consigne 2: Lis le texte pour le comprendre et compléter la carte mentale<br>
        <input onclick="modif(0)" type="radio" name="gender" value="0" checked > Consigne 3: Lis le texte pour le comprendre et construis une carte mentale avec les éléments importants du texte<br>
    </form>
    <form>
        <input onclick="modifier(30)" type="radio" name="gender" value="30" checked > Le texte ne dépasse pas 2000 caractères<br>
        <input onclick="modifier(20)" type="radio" name="gender" value="20" checked > Le texte ne dépasse pas 4000 caractères<br>
        <input onclick="modifier(10)" type="radio" name="gender" value="10" checked > Le texte ne dépasse pas 6000 caractères<br>

    </form>
<form>
    <input onclick="modification(10)" type="checkbox" name="composant" value="10">Des éléments du texte ont été surlignés<br>
    <input onclick="modification(10)" type="checkbox" name="composant" value="10">Le style accessibilité a été utilisé dans le texte<br>
    <input onclick="modification(10)" type="checkbox" name="composant" value="10">Un temps précis est donné à l'élève pour réaliser l'exercice (timer)<br>

</form>
    <p>Niveau de difficulté de l'exercice :</p>
        <progress id="avancement" value="0" max="100"></progress>
        <span id="pourcentage"></span>

function avancement() {
    var ava = document.getElementById("avancement");
    var prc = document.getElementById("pourcentage");
    prc.innerHTML = ava.value + "%";
}

avancement(); //Initialisation



function modif(val) {
    var ava = document.getElementById("avancement");
    if((ava.value+val)<=ava.max && (ava.value+val)>0) {
        ava.value = val;
    }
    avancement();
}


function modifier(valeur) {
    var avan = document.getElementById("avancement");
    if((avan.value+valeur)<=avan.max && (avan.value+valeur)>0) {
        avan.value = valeur;
    }
    avancement();
}

function modification(value) {
    var avanc = document.getElementById("avancement");
    if((avanc.value+value)<=avanc.max && (avanc.value+value)>0) {
        avanc.value += value;
    }
    avancement();
}

Personne n'a une idée, je suis vraiment bloquée.

Merci à tous

Bonjour, je t'avoue que ton code est trop compliqué à comprendre tu utilise des noms de variables que seule toi comprend. C'est donc compliqué de relire. Je ne comprend pas quelles sont le rôle de tes fonctions qui sont la pour modifier(modif, modifier, modification) apparemment (on modifie quoi là?), les différentes valeurs correspondent à quoi ? (val, valeur, value).

Reprends ton code et réécrit le pour qu'il soit lisibles et compréhensible au plus grand nombre d'entre nous.

Bon courage

J'ai essayé de le rendre plus lisible. Il s'agit de faire avancer une barre de progression. Chaque choix correspond à une valeur qui fait donc avancer cette barre. Dans les 2 premiers form, on ne peut faire qu'un seul (choix 1 et 2) alors que dans le troisième, on peut cumuler plusieurs choix.

 Merci à tous

            <form >

                <input onclick="choix1(35)"  type="radio" name="gender" value="40" > Consigne 1: Lis le texte et la carte mentale pour les comprendre<br>
                <input onclick="choix1(15)"  type="radio" name="gender" value="20" > Consigne 2: Lis le texte pour le comprendre et compléter la carte mentale<br>
                <input onclick="choix1(0)"  type="radio" name="gender" value="0" checked > Consigne 3: Lis le texte pour le comprendre et construis une carte mentale avec les éléments importants du texte<br>
            </form>
            <br>
            <form>
                <input onclick="choix2(35)"  type="radio" name="gender" value="30" checked > Le texte ne dépasse pas 2000 caractères<br>
                <input onclick="choix2(20)"  type="radio" name="gender" value="20" checked > Le texte ne dépasse pas 4000 caractères<br>
                <input onclick="choix2(10)"  type="radio" name="gender" value="10" checked > Le texte ne dépasse pas 6000 caractères<br>

            </form>
            <br>
            <form>
                <input onclick="choixMultiple(10)"  type="checkbox" name="composant" value="10">Des éléments du texte ont été surlignés<br>
                <input onclick="choixMultiple(10)"  type="checkbox" name="composant" value="10">Le style accessibilité a été utilisé dans le texte<br>
                <input onclick="choixMultiple(10)"  type="checkbox" name="composant" value="10">Un temps précis est donné à l'élève pour réaliser l'exercice (timer)<br>

            </form><br>
            <h3>Niveau d'aide apportée:</h3><br>
            <progress id="avancement" value="0" max="100"></progress>
            <span id="pourcentage"></span>

function avancement() {
    var ava = document.getElementById("avancement");
    var prc = document.getElementById("pourcentage");
    prc.innerHTML = ava.value + "%";
}

avancement(); //Initialisation



function choix1(val) {
    var ava = document.getElementById("avancement");
    if((ava.value+val)<=ava.max && (ava.value+val)>0) {
        ava.value = val;
    }
    avancement();
}


function choix2(valeur) {
    var ava = document.getElementById("avancement");
    if((ava.value+valeur)<=ava.max && (ava.value+valeur)>0) {
        ava.value = valeur;
    }
    avancement();
}

function choixMultiple(value) {
    var ava = document.getElementById("avancement");
    if((ava.value+value)<=ava.max && (ava.value+value)>0) {
        ava.value += value;
    }
    avancement();
}

Le problème est que l'utilisateur peut cliquer plusieurs fois sur le même INPUT, alors ça va trop augmenter ?

tu devrais faire une seule fonction qui reprend tout les FORM pour calculer est mettre à jour la progression, par exemple, refresh_progress = function ...

Bonjour,

en fait, dans les 2 premiers forms, l'utilisateur ne peut cliquer que sur un seul choix et si il change d'avis et qu'il décoche son premier choix, la barre diminue d'autant. Par contre, la barre ne prend pas la valeur totale de tous les choix des 3 forms, c'est ça mon pb.

Tu veux dire que je transforme mes 3 fonctions en une seule ou j'en créé une quatrième?

Il me semble que les variables ne sont valables qu'a l'intérieur d'une fonction, je ne peux pas les réutiliser, c'est bien ça?

Je débute, merci

j'ai collé ton code dans codepen.io pour te montrer comment tout mettre dans une seule fonction: https://codepen.io/dgm77/pen/oNvLvRX

En fait le pb c'est aussi que tu n'as pas utiliser input type checkbox correctement. un input type checkbox n'a pas de value, mais il faut consulter l'attribut checked pour savoir si il est coché ou non: https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/checkbox