problème de calcul de variables

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
litchi
Messages : 3
Enregistré le : 15 août 2019, 11:27

problème de calcul de variables

Message par litchi » 15 août 2019, 11:33

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
Messages : 3
Enregistré le : 15 août 2019, 11:27

Re: problème de calcul de variables

Message par litchi » 15 août 2019, 22:19

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

Avatar du membre
webmaster
Administrateur du site
Messages : 99
Enregistré le : 28 févr. 2017, 15:19

Re: problème de calcul de variables

Message par webmaster » 16 août 2019, 10:16

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();
}
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

litchi
Messages : 3
Enregistré le : 15 août 2019, 11:27

Re: problème de calcul de variables

Message par litchi » 16 août 2019, 10:40

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.

Répondre