problème de calcul de variables

[litchi]

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, les valeurs de tous les choix ne s'ajoutent pas dans la barre de progression. Merci de votre aide.

Code : Tout sélectionner

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

Code : Tout sélectionner

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();
}

[litchi]

J'ai essayé de rendre mon code 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

HTML:

Code : Tout sélectionner

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

JS (pour faire avancer la barre de progression)

Code : Tout sélectionner

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();
}

[webmaster]

Bonjour

Le cumul s'ajoute à chaque clic. Il faudrait parcourir les éléments pour n'ajouter que les sélectionnés et refaire le calcul complet à chaque élement
Voici comment gérer les éléments multiples :

Code : Tout sélectionner

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

            </form><br>

et la fonction :

Code : Tout sélectionner

function choixMultiple() {
	var value=0;
	for (var i=0; i<3; i++) {
		if (document.forms["multi"].elements["composant"][i].checked) {
			console.log(document.forms["multi"].elements["composant"][i].value)
			value+=parseInt(document.forms["multi"].elements["composant"][i].value);
		}
	}
    var ava = document.getElementById("avancement");
    if((ava.value+value)<=ava.max && (ava.value+value)>0) {
        ava.value += value;
    }
    avancement();
}

[litchi]

J'ai testé ton code. Le problème est que la barre de progression n'ajoute pas les valeurs des choix 1 et 2, elle revient prend la valeur du dernier choix effectué. De plus, dans choix multiple, quand je coche, la barre de progression avance mais quand elle avance également quand je décoche la case.
J'ai essayé ce matin de regrouper tout ça dans une seule fonction mais je ne parviens pas à définir mes variables (la valeur de chaque input, j'écris ceci:

Code : Tout sélectionner

 var choix1= document.form["choix1"].value;

mais j'imagine que ce n'est pas la bonne méthode pour appeler la value de tous les inputs du form choix1.