Javascript : calculs dans un formulaire

Fermé
paolobrasil - 2 mars 2023 à 15:57
jordane45 Messages postés 38157 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 4 mai 2024 - 3 mars 2023 à 21:09

Bonjour à tous,

J'ai entrepris de créer un formulaire permettant de calculer son métabolisme de base, sa dépense énergétique et ses besoins caloriques pour l'intégrer à mon site web car il n'existe pas grand chose sur le net qui répondent à tous ces critères.

PROBLEME n°1 : Je suis novice en codage

POBLEME n°2 : Les calculs ne tiennent pas compte des options que l'utilisateur choisit avec les boutons radios avant de soumettre le formulaire

ci-après, le script

// Retourne les valeurs cochées sur boutons radios

  function f_GetRadioValue()
{
	var radios = document.getElementsByName(id);
	for (var i = 0; i < radios.length; i++) {
		if (radios[i].checked) {
			return radios[i].value * 1;
		}
	}
	return 0;
}

// Fonction de calcul de la page
function Calculer() {
  
  var poids = document.form.poids.value * 1;
  var taille = document.form.taille.value / 100;
  var age = document.form.age.value * 1;
 


  // Calcul du métabolisme
  if(document.getElementById('homme').checked)
    document.form.metabolisme.value = Math.round((13.707 * poids) + (492.3 * taille) - (6.673 * age) + 77.607);
  
	else(document.getElementById('femme').checked)
			document.form.metabolisme.value = Math.round((9.740 * poids) + (172.9 * taille) - (4.737 * age) + 667.051);
		

  // Calcul de la dépense énergétique
  if(document.getElementById('nap1').checked)
			document.form.depense.value = Math.round(document.form.metabolisme.value * 1.375);
		
		else if(document.getElementById('nap2').checked) 
			document.form.depense.value = Math.round(document.form.metabolisme.value * 1.56);
		
    else if(document.getElementById('nap3').checked) 
			document.form.depense.value = Math.round(document.form.metabolisme.value * 1.64);
		
    else(document.getElementById('nap4').checked) 
			document.form.depense.value = Math.round(document.form.metabolisme.value * 1.82);
		
	
  // Calcul du besoin énergétique journalier selon objectif
  if(document.getElementById('perte').checked) 
			document.form.besoins.value = Math.round(parseFloat(document.form.depense.value) - (0.1 * parseFloat(document.form.depense.value)));
		
		else if(document.getElementById('stable').checked) 
			document.form.besoins.value = Math.round(parseFloat(document.form.depense.value) * 1);
		
    else(document.getElementById('gain').checked)  
			document.form.besoins.value = Math.round(parseFloat(document.form.depense.value) + (0.1 * parseFloat(document.form.depense.value)));
		
}

voici le code html du formulaire :

<form name="form" id="form" action="" method="post">

<table>
<tr>
  <td align="right"><label for="poids">Poids :</label></td>
  <td align="left"><input name="poids" id="poids" value="70" onFocus="This.value='';" onchange="Calculer()" style="width:4em" type="number" lang="fr"> kg</td>
</tr>
  
<tr>
  <td align="right"><label for="taille">Taille :</label></td>
  <td align="left"><input name="taille" id="taille" value="170" onFocus="This.value='';" onchange="Calculer()" style="width:4em" type="number" lang="fr"> cm</td>
</tr>
  
<tr>
  <td align="right"><label for="age">Age :</label></td>
  <td align="left"><input name="age" id="age" value="33" onFocus="This.value='';" onchange="Calculer()" style="width:4em" type="number" lang="fr"> ans</td>
</tr>
</table>  

<table>  
<tr>
  <td align="left" colspan="2"><strong>Genre :</strong></td>
</tr>
  
<tr>
    <td align="left" colspan="3"><input name="sexe" id="homme" value="homme" onclick="Calculer()" type="radio" checked>
  <label for="homme"> Homme</label><br>
  
  <input name="sexe" id="femme" value="femme" onclick="Calculer()" type="radio">
      <label for="femme"> Femme</label></td>
</tr>
  
<tr>
  <td align="left" colspan="4"><strong>Niveau d'activité physique (NAP) :</strong></td>
</tr>

<tr>
  <td align="left" colspan="4"><input name="nap" id="nap1" value="nap1" onclick="Calculer()" type="radio">
  <label for="sedentaire">Sédentaire</label><br>
   
  <input name="nap" id="nap2" value="nap2" onclick="Calculer()" type="radio">
  <label for="legere">Activité physique légère</label><br>
  
  <input name="nap" id="nap3" value="nap3" onclick="Calculer()" type="radio" checked>
  <label for="moderee">Activité physique modérée</label><br>
  
  <input name="nap" id="nap4" value="nap4" onclick="Calculer()" type="radio">
  <label for="intense">Activité physique intense</label></td>
</tr>

<tr>
  <td align="left" colspan="4"><strong>Objectif :</strong></td>
</tr>
  
<tr>
  <td align="left" colspan="4"><input name="objectif" id="perte" value="perte" onclick="Calculer()" type="radio" checked>
  <label for="perte">Perte de poids</label><br>
  
  <input name="objectif" id="stable" value="stable" onclick="Calculer()" type="radio">
  <label for="stable">Stabiliser son poids</label><br>
  
  <input name="objectif" id="gain" value="gain" onclick="Calculer()" type="radio">
  <label for="gain">Prendre de la masse musculaire</label></td>
</tr>
<table>
  
<br />  
  
<tr>
<td><input name="bouton" id="bouton" type="button" onclick="Calculer()" value="Calculer mes besoins énergétiques"></td>
</tr>
  
<br />
  
<table>  
<tr>
  <td align="left" colspan="4"><strong>Résultats :</strong></td>
</tr>  
  
<tr>
  <td class="score_result" align="left"> Ton Métabolisme de base (MB) :</td>
  <td align="left"><input name="metabolisme" id="metabolisme" style="width:5em" readonly="readonly" type="text"> kCal</td>
</tr>
  
<tr>
  <td class="score_result" align="left"> Ta Dépense énergétique (DEJ) : </td>
  <td align="left"><input name="depense" id="depense" style="width:5em" readonly="readonly" type="text"> kCal</td>
</tr>

<tr>
  <td class="score_result" align="left">Tes besoins caloriques journalier pour atteindre ton objectif  : </td>
  <td align="left"><input name="besoins" id="besoins" style="width:5em" readonly="readonly" type="text"> kCal</td>
</tr>
</table>
                  
</form>

Par avance merci pour vos retours ????????

2 réponses

xHaMaz Messages postés 108 Date d'inscription mardi 3 janvier 2023 Statut Membre Dernière intervention 23 avril 2023 14
3 mars 2023 à 18:52

Bonjour, il y a une erreur de syntaxe dans la ligne 27, elle ne devrait pas inclure le mot clé else. Tu peux remplacer cette ligne par :

else if (document.getElementById('femme').checked)

Pour ton 2ème problème, la fonction f_GetRadioValue() n'est pas appelée dans ton code. Un exemple de comment tu pourrais le modifier :

// Fonction de calcul de la page
function Calculer() {
  
  var poids = document.form.poids.value * 1;
  var taille = document.form.taille.value / 100;
  var age = document.form.age.value * 1;
  var sexe = f_GetRadioValue("sexe");
  var nap = f_GetRadioValue("nap");

  // Calcul du métabolisme
  if(sexe === "homme")
    document.form.metabolisme.value = Math.round((13.707 * poids) + (492.3 * taille) - (6.673 * age) + 77.607);
  
  else if(sexe === "femme")
    document.form.metabolisme.value = Math.round((9.740 * poids) + (172.9 * taille) - (4.737 * age) + 667.051);

  // Calcul de la dépense énergétique
  if(nap === "nap1")
    document.form.depense.value = Math.round(document.form.metabolisme.value * 1.375);
    
  else if(nap === "nap2")
    document.form.depense.value = Math.round(document.form.metabolisme.value * 1.56);
    
  else if(nap === "nap3")
    document.form.depense.value = Math.round(document.form.metabolisme.value * 1.64);
    
  else if(nap === "nap4")
    document.form.depense.value = Math.round(document.form.metabolisme.value * 1.82);

  // Calcul du besoin énergétique journalier selon objectif
  if(document.getElementById('perte').checked) 
    document.form.besoins.value = Math.round(parseFloat(document.form.depense.value) - (0.1 * parseFloat(document.form.depense.value)));
    
  else if(document.getElementById('stable').checked) 
    document.form.besoins.value = Math.round(parseFloat(document.form.depense.value) * 1);
    
  else if(document.getElementById('gain').checked)  
    document.form.besoins.value = Math.round(parseFloat(document.form.depense.value) + (0.1 * parseFloat(document.form.depense.value)));
    
}
0
jordane45 Messages postés 38157 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 4 mai 2024 4 655
3 mars 2023 à 21:09

Bonjour,

Voici une version optimisée de ton code

<form name="form" id="form" action="" method="post">

<table>
<tr>
  <td align="right"><label for="poids">Poids :</label></td>
  <td align="left"><input name="poids" id="poids" value="70" onFocus="This.value='';" onchange="Calculer()" style="width:4em" type="number" lang="fr"> kg</td>
</tr>
  
<tr>
  <td align="right"><label for="taille">Taille :</label></td>
  <td align="left"><input name="taille" id="taille" value="170" onFocus="This.value='';" onchange="Calculer()" style="width:4em" type="number" lang="fr"> cm</td>
</tr>
  
<tr>
  <td align="right"><label for="age">Age :</label></td>
  <td align="left"><input name="age" id="age" value="33" onFocus="This.value='';" onchange="Calculer()" style="width:4em" type="number" lang="fr"> ans</td>
</tr>
</table>  

<table>  
<tr>
  <td align="left" colspan="2"><strong>Genre :</strong></td>
</tr>
  
<tr>
    <td align="left" colspan="3"><input name="sexe" id="homme" value="homme"  type="radio" checked>
  <label for="homme"> Homme</label><br>
  
  <input name="sexe" id="femme" value="femme"  type="radio">
      <label for="femme"> Femme</label></td>
</tr>
  
<tr>
  <td align="left" colspan="4"><strong>Niveau d'activité physique (NAP) :</strong></td>
</tr>

<tr>
  <td align="left" colspan="4"><input name="nap" id="nap1" value="nap1"  type="radio">
  <label for="sedentaire">Sédentaire</label><br>
   
  <input name="nap" id="nap2" value="nap2"  type="radio">
  <label for="legere">Activité physique légère</label><br>
  
  <input name="nap" id="nap3" value="nap3"  type="radio" checked>
  <label for="moderee">Activité physique modérée</label><br>
  
  <input name="nap" id="nap4" value="nap4"  type="radio">
  <label for="intense">Activité physique intense</label></td>
</tr>

<tr>
  <td align="left" colspan="4"><strong>Objectif :</strong></td>
</tr>
  
<tr>
  <td align="left" colspan="4"><input name="objectif" id="perte" value="perte"  type="radio" checked>
  <label for="perte">Perte de poids</label><br>
  
  <input name="objectif" id="stable" value="stable"  type="radio">
  <label for="stable">Stabiliser son poids</label><br>
  
  <input name="objectif" id="gain" value="gain"  type="radio">
  <label for="gain">Prendre de la masse musculaire</label></td>
</tr>
<table>
  
<br />  
  
<tr>
<td><input name="bouton" id="bouton" type="button"  value="Calculer mes besoins énergétiques"></td>
</tr>
  
<br />
  
<table>  
<tr>
  <td align="left" colspan="4"><strong>Résultats :</strong></td>
</tr>  
  
<tr>
  <td class="score_result" align="left"> Ton Métabolisme de base (MB) :</td>
  <td align="left"><input name="metabolisme" id="metabolisme" style="width:5em" readonly="readonly" type="text"> kCal</td>
</tr>
  
<tr>
  <td class="score_result" align="left"> Ta Dépense énergétique (DEJ) : </td>
  <td align="left"><input name="depense" id="depense" style="width:5em" readonly="readonly" type="text"> kCal</td>
</tr>

<tr>
  <td class="score_result" align="left">Tes besoins caloriques journalier pour atteindre ton objectif  : </td>
  <td align="left"><input name="besoins" id="besoins" style="width:5em" readonly="readonly" type="text"> kCal</td>
</tr>
</table>
                  
</form>
<script>

//on attache l'event "click" à chaque input
var inputs = document.querySelectorAll('input');
inputs.forEach(elm => {
  elm.addEventListener('click', () =>Calculer());
});


// Fonction de calcul de la page
function Calculer() {
  
  var poids = document.querySelector('#poids').value * 1;
  var taille = document.querySelector('#taille').value / 100;
  var age = document.querySelector('#age').value * 1;
 
  var inp_metabolisme = document.querySelector('#metabolisme');
  var inp_depense = document.querySelector('#depense');
  var inp_besoins = document.querySelector('#besoins');

    
  // Calcul du métabolisme
  var sexe = document.querySelector("[name='sexe']:checked").value;
  if(sexe == 'homme'){
    inp_metabolisme.value = Math.round((13.707 * poids) + (492.3 * taille) - (6.673 * age) + 77.607);
  }	else {
		inp_metabolisme.value = Math.round((9.740 * poids) + (172.9 * taille) - (4.737 * age) + 667.051);
	}

  // Calcul de la dépense énergétique
  var nap = document.querySelector("[name='nap']:checked").value;
  switch(nap){
    case 'nap1':
      inp_depense.value = Math.round(inp_metabolisme.value * 1.375);
      break;
    case 'nap2':
      inp_depense.value = Math.round(inp_metabolisme.value * 1.56);
      break;
    case 'nap3':
      inp_depense.value = Math.round(inp_metabolisme.value * 1.64);
      break;
    case 'nap4':
      inp_depense.value = Math.round(inp_metabolisme.value * 1.82);
      break;      
  }

  // Calcul du besoin énergétique journalier selon objectif
  var objectif = document.querySelector("[name='objectif']:checked").value;
    switch(objectif){
    case 'perte':
      inp_besoins.value = Math.round(parseFloat(inp_depense.value) - (0.1 * parseFloat(inp_depense.value)));
      break;
    case 'stable':
      inp_besoins.value = Math.round(parseFloat(inp_depense.value) * 1);
      break;
    case 'gain':
      inp_besoins.value = Math.round(parseFloat(inp_depense.value) + (0.1 * parseFloat(inp_depense.value)));
      break;
        
  }
			
		
}
</script>        

0