Formule de calcul différente selon réponses utilisateurs

chancelienne Messages postés 1 Date d'inscription vendredi 3 octobre 2014 Statut Membre Dernière intervention 19 septembre 2022 - 19 sept. 2022 à 14:53
Grandasse_ Messages postés 912 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 24 janvier 2023 - 17 oct. 2022 à 14:47

Bonjour,

Voici un script qui permet de récupérer une valeur pour effectuer un calcul de quantité journalière après plusieurs questions :

// get the element
var element = document.getElementById("calcul_quantite");

// recuperer la valeur saisie par l'internaute
var poids = prq.getSlideValue("Pjil9R9");

var quantite = (poids * 0.03)*1000;

// insert the calculation on the element in the result page
element.innerHTML = "Notre conseil est " +quantite+ " grammes en 2 prises";

Il fonctionne parfaitement en affichant le résultat dans :

<div id="calcul_quantite"></div>

Mon souci est que j'aimerai pouvoir introduire une condition, basée sur une réponse de l'utilisateur à une des questions à choix multiples de mon questionnaire :
- si l'utilisateur répond A , le calcul sera var quantite = (poids * 0.05)*1000;
- si l'utilisateur répond B ou C, le calcul sera var quantite = (poids * 0.03)*1000;

J'ai tenté en ajoutant ceci pour les différents choix possibles :

var choices1 = document.getElementById("#choice-Rbhg3y7");
var choices2 = document.getElementById("#choice-nlhzVEQ");
var choices3 = document.getElementById("#choice-g5hm7YD");

Mais je ne sais pas trop comment l'intégrer à mon script (je débute en js)
Merci par avance pour votre aide.


Windows / Chrome 105.0.0.0

A voir également:

2 réponses

Salut,

vous pouvez vous intéresser au test conditionnel IF(si) et son utilisation.

Dans le cas que vous évoquez cela paraît assez simple.

1er étape vous récupérez la valeur du choix(A,B ou C),par exemple dans une variable.

Ensuite vous comparez la valeur obtenue pour effectuer un calcul ou un autre.

Vous avez aussi la structure switch qui sera peu être plus facile mais IF reste plus simple à comprendre dans un premier temps et est utilisation plus générale d'un test conditionnel.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch

Pour la structuration de votre code je propose ceci:

Créer une fonction qui permet de calculer une valeur en utilisant deux variables, je la nomme Calcul, elle retourne la valeur en sortie(avec le mot clé return)

function Calcul(poids,facteur){
return poids*facteur*1000
}

Comme vous pouvez le voir la fonction peut-être utilisée dans tous les cas possible, il suffit de fournir à celle ci le poids et le multiplicateur voulu, seule la valeur 1000 est constante.

Détecter le click et associer la valeur de A ou B ou C responsable du clic sur le bouton voulu puis lancer la fonction Calcul en utilisant en paramètres les deux valeurs nécessaires à multiplier .

Reporter la valeur obtenue où on en a besoin(un affichage par exemple)

Pour détecter un clic vous pouvez utiliser la fonction addEventListener:

Dans la fonction qui "réagit" au clic(avec addEventListener) vous pouvez soit utiliser des variables soit utiliser directement les valeurs obtenues: le poids par le champ à remplir et l'autre facteur de multiplication par le if.

Je n'ai pas voulu détailler plus avec mon exemple de bouton parce vous ne mettez pas le détail de votre HTML donc ne donnez aucun détail sur la façon dont vous obtenez les deux valeurs.

Dans le cas d'un formulaire(ce qui me paraît le mieux et est la bonne solution) le principe reste le même sauf que vous devez tenir compte des spécificités d'un formulaire:

_déclencher lea chaîne d'instructions lors de la validation du formulaire en annulant l'envoi de celui ci bien entendu.

_vérifier si le champ du poids est bien rempli avant daller plus loin(et indiquer un message d'erreur si cela n'est pas fait)

_vérifier de la même manière pour le choix. Il est peut-être même plus pratique de stocker le modificateur dans le choix directement(case à cocher par exemple) plutôt que #choice-Rbhg3y7 qui n'est qu'une référence et n'a aucun sens ni intérêt uniquement pour le calcul. Si cette valeur "

 
<span>#choice-Rbhg3y7"" est utile plus tard alors il faudra la stocker
 et utiliser le test conditionnel sur cette valeur.</span>

SI #choice-Rbhg3y7 alors on attribue la valeur 0.03 au multiplicateur de la fonction Calcul.

Stocker choix1= #choice-Rbhg3y7", choix2= ... n'a aucun intérêt sauf vous aider à décomposer par étape mais par là même rajoute une étape, autant travailler avec la valeur directement(par exemple "A", "B" ou "C" si c'est cela qui est indiqué) et rendre votre programme plus simple et cohérent sans rajouter cette étape.

Un exemple plus concret avec le HTML suivant:

<form method="" action="">
10 
<label>multiplie par</label>
<input type=checkbox name=valeurs value=1>1</input>
<input type=checkbox name=valeurs value=2>2</input>
<input type=checkbox name=valeurs value=3>3</input>

<input id=valider type=submit>Calculer</submit>
</form>
document.getElementById('valider').addEventListener(function(){

var facteur=null;//-- création d'une variable interne à la fonction qui stocke le multiplicateur

//-- si le premier élément qui a le nom "valeurs" est coché(la valeur true indique cela)
if(document.getElementsByName('valeurs')[0].checked===true){
facteur=1

}
//-- si le second élément élément qui a le nom "valeurs" est coché
if(document.getElementsByName('valeurs')[1].checked===true){
facteur=2

}
//-- même chose pour le choix de 3 comme multiplicateur pour la 3ème case à cocher
if(document.getElementsByName('valeurs')[0].checked===true){
facteur=3

}

alert(10*facteur)//--indique le résultat en message d'alerte
/** notez que si aucune case est cochée la variable facteur reste de valeur nulle(null) et donc cela va indiquer une erreur. D'où la nécessité de vérifier que la case à cochéée est bien cochée avant le calcul et que le poids est bien indiqué pour votre calcul.*/
})
0
Grandasse_ Messages postés 912 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 24 janvier 2023 596
17 oct. 2022 à 14:47

Bonjour,

J'imagine quelque chose de cet ordre là  :

var quantite = function(reponse) {
  if (reponse === "A") {
    return (poids * 0.05)*1000
  }
  if (reponse === "B" || reponse === "C") {
    return (poids * 0.03)*1000
  }
}

Et ça demande d'adapter ensuite ici : 

element.innerHTML = "Notre conseil est " +quantite(reponse)+ " grammes en 2 prises";

Pour récupérer "reponse", tu as un select sur cette question ?


0