Javascript : calculs dans un formulaire

paolobrasil -  
jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   -

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

  1. xHaMaz Messages postés 123 Date d'inscription   Statut Membre Dernière intervention   18
     

    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
  2. jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
     

    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