Calculer le pourcentage de nombre de cases cochée

Résolu
henri -  
jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   -
Bonjour,
je cherche a calculer le pourcentage de cases qui sont cochée en en fonction de celui-ci changer une image.
voici le code que j'ai tenter pour faire ça: 

<p class=textbox> <input type="checkbox" id="box1"  onclick="nbtf();moy()" >  </p>
<p class=textbox> <input type="checkbox" id="box2"  onclick="moy();nbtf()"/> </p>
<p class=textbox> <input type="checkbox" id="box3"  onclick="moy();nbtf()"/> </p>
<p class=textbox> <input type="checkbox" id="kbox4"  onclick="moy();nbtf()"/></p>
<script>
var tf = 0;//tf correspond au nombre de cases cochée
var t = 4; // nombre de cases total
var p = 0; //pourcntage de case cochée
function nbtf(){	//fonction qui compte le nombre de case cochée
		if( x.checked == true ){
			tf += 1;
		}
		else{
			tf -= 1;
		}	
	}
function moy(){	// fonction qui fais correspondre un % à une image
		var p = 100*(tf/t)
		if (p>=0 && p<12,5){	
			document.getElementById("cerlceR").// on prend la moitier de la difference entre  chaque % qui correspond a une image
			src = "../images/cercleR0.png;
			
		}
		if (p>=12,5 && p<37,5){
			document.getElementById("cerlceR").
			src = "../images/cercleR25.png;
		}
		if (p>=37,5 && p<62,5){
			document.getElementById("cerlceR").
			src = "../images/cercleR50.png;
		}
		if (p>=62,5 && p<87,5){
			document.getElementById("cerlceR").
			src = "../images/cercleR75.png;

		}
		if (p>=87,5 && p<=100){
		document.getElementById("cerlceR").
		src = "../images/cercleR100.png;
		}
	}

6 réponses

  1. Utilisateur anonyme
     
    Bonjour,
    Je n'ai pas regardé le code en détail mais la notation décimale doit se faire avec le point (.) et par la virgule.
    0
    1. henri
       
      merci ça fais une faute en moins.
      voici le code avec quelque corrections: 
      <p class=textbox> <input type="checkbox" id="box1"  onclick="moy(this);nbtf(this)" >  </p>
<p class=textbox> <input type="checkbox" id="box2"  onclick="moy(this);nbtf(this)"/> </p>
<p class=textbox> <input type="checkbox" id="box3"  onclick="moy(this);nbtf(this)"/> </p>
<p class=textbox> <input type="checkbox" id="box4"  onclick="moy(this);nbtf(this)"/></p>
<script>
var tf = 0;//tf correspond au nombre de cases cochée
var t = 4; // nombre de cases total
var p = 0; //pourcntage de case cochée
function nbtf(tf){ //fonction qui compte le nombre de case cochée
  if( x.checked == true ){
   tf += 1;
  }
  else{
   tf -= 1;
  } 
 }
function moy(p,tf,t) { // fonction qui fais correspondre un % à une image
  var p = 100*(tf/t);
  if (p>=0 && p<12.5){ 
   document.getElementById("cerlceR").// on prend la moitier de la difference entre  chaque % qui correspond a une image
   src = "../images/cercleR0.png";
   
  }
  if (p>=12.5 && p<37.5){
   document.getElementById("cerlceR").
   src = "../images/cercleR25.png";
  }
  if (p>=37.5 && p<62.5){
   document.getElementById("cerlceR").
   src = "../images/cercleR50.png";
  }
  if (p>=62.5 && p<87.5){
   document.getElementById("cerlceR").
   src = "../images/cercleR75.png";

  }
  if (p>=87.5 && p<=100){
  document.getElementById("cerlceR").
  src = "../images/cercleR100.png";
  }
 }
</script>

      Ce code ne fais rien enfin on peux appuier sur les differents boutton mais rien ne se produit(l'image que je souhaite modifier est deja presente au depart).
      Avez-vous des solutions à m'apporter svp?
      0
    2. Utilisateur anonyme > henri
       
      Il manque le guillemet fermant passé à la chaine .src ...

      Et ligne 12 : Alert
      0
    3. henri > Utilisateur anonyme
       
      Oula!!
      oui merci je n'avais même pas vue.
      0
    4. Utilisateur anonyme > henri
       
      et personnellement; je préfère mettre le point-virgule à la fin de chaque ligne même lorsque c'est facultatif : ligne 18,
      0
    5. henri > Utilisateur anonyme
       
      Merci, avez-vous d'autres erreurs qui empêche le programme de fonctionner?
      0
  2. Utilisateur anonyme
     
    Désolé, je n'avais pas vu votre message 10 ! et en effet, c'est bien du javascript ! (re désolé !)

    Ca ne marche toujours pas ?
    0
  3. henri
     
    je ne vois pas le problème, j'ai bien écrit <script> et </script> au début et a la fin de mon programme en javascript.
    0
    1. Utilisateur anonyme
       
      Nos messages 11 et 12 se sont croisés ! Désolé.
      Je suis plusieurs sujets en même temps : je ne devrais pas !

      C'est OK maintenant ?
      0
      1. henri > Utilisateur anonyme
         
        Pas de problème.
        Non, le programme ne fonctionne pas.
        0
      2. Utilisateur anonyme > henri
         
        En regardant le détail ;

        Comment est définie la variable x ?
        Vous appelez les fonctions ainsi : onclick="moy(this);nbtf(this)"

        or moy() est définie avec 3 paramètres numériques; et nbtf ()avec un paramètre numérique.

        L'appel avec this comme paramètre ne peut pas fonctionner !

        Si votre code complet n'est pas trop long, et qu'il ne contient rien de confidentiel, il faudrait le mettre en ligne...
        0
      3. henri > Utilisateur anonyme
         
        Aucun souci le voici: 
        <!DOCTYPE html >
<html > 
<head>
    <title>SUIVRE SES OBJECTIFS</title>
 <link rel="icon"  href="..\images\icon.png" />
</head>
<body>

<P><HR SIZE="5" color=black></P>

 <center>
 <img alt="000%" title="000%" class=cercle id=cercleR src="../images/cercleR0.png" >
  <img alt="100%"title="100%" class=cercle id=cercleV src="../images/cercleV100.png" >
   <img alt="50%"title="75%"class=cercle id=cercleB src="../images/cercleB75.png" >
   <img alt="50%"title="50%"class=cercle id=cercleJ src="../images/cercleJ50.png" >
</center>
<a href="objse.html" class=lien> <h3   class=center> OBJECTIF DE LA SEMAINE </h3> </a>
<P><HR SIZE="5" color=black></P>

<center>
<img  class=ex src="../images/box1.png" alt=" Fait 1x">  
<img class=ex src="../images/box2.png" >  
<img class=ex src="../images/box3.png" >  
<img class=ex src="../images/box4.png" >  
<img  class=ex src="../images/box5.png" >  
<img class=ex src="../images/box6.png" >  
<img class=ex src="../images/box7.png" >
</center>
<P><HR SIZE="5" color=black></P>

<h3>A faire aujourd'hui:</h3>

<p class=textbox> <input type="checkbox" id="box1"  onclick="moy();nbtf()" > objectif 1 </p>
<p class=textbox> <input type="checkbox" id="box2"  onclick="moy();nbtf()"/> objectif 2</p>
<p class=textbox> <input type="checkbox" id="box3"  onclick="moy();nbtf()"/> objectif 3</p>
<p class=textbox> <input type="checkbox" id="box4"  onclick="moy();nbtf()"/> objectif 4</p>

<br><br><br>
<h3>A faire une fois par jour:</h3>

<p class=textbox><img class=box id=myimg1 src="../images/box1.png" onclick="ch_img1()"> objectif 1</p> 
<p class=textbox><img class=box id=myimg2 src="../images/box1.png" onclick="ch_img2()"> objectif 2</p>
<p class=textbox><img class=box id=myimg3 src="../images/box1.png" onclick="ch_img3()"> objectif 3</p>
<p class=textbox><img class=box id=myimg4 src="../images/box1.png"onclick="ch_img4()">  objectif 4</p>
<p class=textbox><img class=box id=myimg5 src="../images/box1.png" onclick="ch_img5()"> objectif 5</p>

<script>
var tf = 0
var t = 4; // nombre de cases total
var p = 0; //pourcntage de case cochée
function nbtf(tf){ //fonction qui compte le nombre de case cochée
  if( x.checked == true ){
   tf = tf + 1;
  }
  else{
   tf =tf - 1;
  } 
 }
function moy(p,tf,t) { // fonction qui fais correspondre un % à une image
  var p = 100*(tf/t);
  if (p>=0 && p<12.5){ 
   document.getElementById("cerlceR").// on prend la moitier de la difference entre  chaque % qui correspond a une image
   src = "../images/cercleR0.png";
   
  }
  else if (p>=12.5 && p<37.5){
   document.getElementById("cerlceR").
   src = "../images/cercleR25.png";
  }
  else if (p>=37.5 && p<62.5){
   document.getElementById("cerlceR").
   src = "../images/cercleR50.png";
  }
  else if (p>=62.5 && p<87.5){
   document.getElementById("cerlceR").
   src = "../images/cercleR75.png";

  }
  else if (p>=87.5 && p<=100){
  document.getElementById("cerlceR").
  src = "../images/cercleR100.png";
  }
 }
var x = 2;
 function ch_img1(){
  document.getElementById("myimg1").
  src = "../images/box"+x+".png";
  x++;
  if(x>=8){
   x=1;
  }
 }
var x2 = 2;
 function ch_img2(){
  document.getElementById("myimg2").
  src = "../images/box"+x2+".png";
  x2++;
  if(x2>=8){
   x2=1;
  }
 } 
var x3 = 2;
 function ch_img3(){
  document.getElementById("myimg3").
  src = "../images/box"+x3+".png";
  x3++;
  if(x3>=8){
   x3=1;
  }
 } 
var x4 = 2;
 function ch_img4(){
  document.getElementById("myimg4").
  src = "../images/box"+x4+".png";
  x4++;
  if(x4>=8){
   x4=1;
  }
 } 
var x5 = 2;
 function ch_img5(){
  document.getElementById("myimg5").
  src = "../images/box"+x5+".png";
  x5++;
  if(x5>=8){
   x5=1;
  }
 } 
</script>

</body>
</html>
        0
  4. Utilisateur anonyme
     
    Je me suis concentré sur le problème identifié au départ. J'ai commenté les modifications et ajouts autant que possible : 

    <!DOCTYPE html >
<html > 
<head>
    <title>SUIVRE SES OBJECTIFS</title>
 <link rel="icon"  href="..\images\icon.png" />
</head>

<body>
 <HR SIZE="5" color=black> <!-- balise de tyoe block : la mettre dans un paragraphe n'est pas nécessaire--> 
 <center>
 <img alt="000%" title="000%" class=cercle id=cercleR src="../images/cercleR0.png" >
 <img alt="100%" title="100%" class=cercle id=cercleV src="../images/cercleV100.png" >
 <img alt="50%" title="75%" class=cercle id=cercleB src="../images/cercleB75.png" >
 <img alt="50%" title="50%" class=cercle id=cercleJ src="../images/cercleJ50.png" >
 </center>
 <a href="objse.html" class=lien><h3 class=center> OBJECTIF DE LA SEMAINE </h3></a>
 <HR SIZE="5" color=black>

 <center>
 <img class=ex src="../images/box1.png" alt=" Fait 1x">  
 <img class=ex src="../images/box2.png" >  
 <img class=ex src="../images/box3.png" >  
 <img class=ex src="../images/box4.png" >  
 <img class=ex src="../images/box5.png" >  
 <img class=ex src="../images/box6.png" >  
 <img class=ex src="../images/box7.png" >
 </center>
 <P><HR SIZE="5" color=black></P>

 <h3>A faire aujourd'hui:</h3>

 <p class=textbox> <input type="checkbox" id="box1"  onclick="moy();nbtf(this)" > objectif 1 </p>
 <p class=textbox> <input type="checkbox" id="box2"  onclick="moy();nbtf(this)"/> objectif 2</p>
 <p class=textbox> <input type="checkbox" id="box3"  onclick="moy();nbtf(this)"/> objectif 3</p>
 <p class=textbox> <input type="checkbox" id="box4"  onclick="moy();nbtf(this)"/> objectif 4</p>

 <br><br><br>
 <h3>A faire une fois par jour:</h3>

 <p class=textbox><img class=box id=myimg1 src="../images/box1.png" onclick="ch_img1()"> objectif 1</p> 
 <p class=textbox><img class=box id=myimg2 src="../images/box1.png" onclick="ch_img2()"> objectif 2</p>
 <p class=textbox><img class=box id=myimg3 src="../images/box1.png" onclick="ch_img3()"> objectif 3</p>
 <p class=textbox><img class=box id=myimg4 src="../images/box1.png" onclick="ch_img4()"> objectif 4</p>
 <p class=textbox><img class=box id=myimg5 src="../images/box1.png" onclick="ch_img5()"> objectif 5</p>

 <script>
 var tf = 0
 const t = 4; // nombre de cases total
// var p = 0; //pourcntage de case cochée
 
 function nbtf(x){ //fonction qui compte le nombre de case cochée
 //**** ICI x sera la chexkbox passée par this (rajouté) dans l'appel *****
   if(x.checked == true ){
    tf = tf + 1;
   }
   else{
    tf =tf - 1;
   } 
  }
 
 
 function moy(){ // fonction qui fais correspondre un % à une image
   /****** 
   pas besoin de définir p en dehors comme variable globale puisqu'elle n'est utilisée qu'ici
   on pourrait faire pareil et declarer tf et t ici. d'ailleurs je déclare t comme une constante (ligne 48)
   
   du coup, pas besoin de passer des paramètres à moy()
   */
   var p = 100*(tf/t);
   /*** il y avait une erreur de frappe : cerlceR au lieu de cercleR
   on va se simplifier la vie en déclarant une variable cercle :
   */
   
   var cercle=document.getElementById("cercleR")
   if (p>=0 && p<12.5){ 
    cercle.// on prend la moitier de la difference entre chaque % qui correspond a une image
    src = "../images/cercleR0.png";  
   }
   else if (p>=12.5 && p<37.5){
    cercle.src = "../images/cercleR25.png";
   }
   else if (p>=37.5 && p<62.5){
    cercle.src = "../images/cercleR50.png";
   }
   else if (p>=62.5 && p<87.5){
    cercle.src = "../images/cercleR75.png";
   }
   else if (p>=87.5 && p<=100){
    cercle.src = "../images/cercleR100.png";
   }
 }
 
 var x = 2;
 /*** on est d'accord, ce n'est pas le même x que dans la fonction nbtf !? */
 function ch_img1(){
   document.getElementById("myimg1").
   src = "../images/box"+x+".png";
   x++;
   if(x>=8){
    x=1;
   }
  }
 var x2 = 2;
  function ch_img2(){
   document.getElementById("myimg2").
   src = "../images/box"+x2+".png";
   x2++;
   if(x2>=8){
    x2=1;
   }
  } 
 var x3 = 2;
  function ch_img3(){
   document.getElementById("myimg3").
   src = "../images/box"+x3+".png";
   x3++;
   if(x3>=8){
    x3=1;
   }
  } 
 var x4 = 2;
  function ch_img4(){
   document.getElementById("myimg4").
   src = "../images/box"+x4+".png";
   x4++;
   if(x4>=8){
    x4=1;
   }
  } 
 var x5 = 2;
  function ch_img5(){
   document.getElementById("myimg5").
   src = "../images/box"+x5+".png";
   x5++;
   if(x5>=8){
    x5=1;
   }
  } 
 </script>

 </body>
</html>
    0
    1. henri
       
      merci beaucoup ,c'est mieux mais pas encore parfait…
      en gros l'image ne change seulement quand on coche puis recoche la case si on coche une case il y a pas de changement, si on en coche deux ca affiche 25% au lieu de 50% puis ca augmente de 25% par case cocher donc si on les coche tout ca affiche 75% et non 100% .ensuite si en décoche une ça passe a 100%. C'est plutôt étrange.
      0

  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
     
    Bonjour,

    Le code peut être largement simplifié .. 
    <!DOCTYPE html >
<html > 
<head>
  <title>SUIVRE SES OBJECTIFS</title>
  <link rel="icon"  href="..\images\icon.png" />
  <meta charset="utf-8">
</head>

<body>
 <HR SIZE="5" color=black> <!-- balise de tyoe block : la mettre dans un paragraphe n'est pas nécessaire--> 
 <center>
 <img alt="000%" title="000%" class="cercle" id="cercleR" src="../images/cercleR0.png" >
 <img alt="100%" title="100%" class="cercle" id="cercleV" src="../images/cercleV100.png" >
 <img alt="50%" title="75%" class="cercle" id="cercleB" src="../images/cercleB75.png" >
 <img alt="50%" title="50%" class="cercle" id="cercleJ" src="../images/cercleJ50.png" >
 </center>
 <a href="objse.html" class="lien">
   <h3 class="center"> OBJECTIF DE LA SEMAINE </h3>
 </a>
 <HR SIZE="5" color="black">

 <center>
 <img class=ex src="../images/box1.png" alt=" Fait 1x">  
 <img class=ex src="../images/box2.png" >  
 <img class=ex src="../images/box3.png" >  
 <img class=ex src="../images/box4.png" >  
 <img class=ex src="../images/box5.png" >  
 <img class=ex src="../images/box6.png" >  
 <img class=ex src="../images/box7.png" >
 </center>
 <P><HR SIZE="5" color=black></P>

 <h3>A faire aujourd'hui:</h3>

 <p class="textbox"> <input type="checkbox" id="box1"  class="today" onclick="moy();" > objectif 1 </p>
 <p class="textbox"> <input type="checkbox" id="box2"  class="today" onclick="moy();"/> objectif 2</p>
 <p class="textbox"> <input type="checkbox" id="box3"  class="today" onclick="moy();"/> objectif 3</p>
 <p class="textbox"> <input type="checkbox" id="box4"  class="today" onclick="moy();"/> objectif 4</p>

 <br><br><br>
 <h3>A faire une fois par jour:</h3>

 <p class="textbox"><img class="box" id="myimg1" src="../images/box1.png" data-numimg="1" onclick="ch_img(this.id)"> objectif 1</p> 
 <p class="textbox"><img class="box" id="myimg2" src="../images/box1.png" data-numimg="1" onclick="ch_img(this.id)"> objectif 2</p>
 <p class="textbox"><img class="box" id="myimg3" src="../images/box1.png" data-numimg="1" onclick="ch_img(this.id)"> objectif 3</p>
 <p class="textbox"><img class="box" id="myimg4" src="../images/box1.png" data-numimg="1" onclick="ch_img(this.id)"> objectif 4</p>
 <p class="textbox"><img class="box" id="myimg5" src="../images/box1.png" data-numimg="1" onclick="ch_img(this.id)"> objectif 5</p>

 <script>

 function getNbTf(){
  let nb = 0;
  const ckb = document.querySelectorAll("input[type=checkbox].today");
    [...ckb].forEach( el => {
      if( el.checked ) {
        nb++;
      } 
    });
    return nb;
 }
 
 function moy(){ // fonction qui fais correspondre un % à une image
   var tf = getNbTf();
   var p = 100*(tf/t);
   var imgP="";

   if (p>=0 && p<12.5){ 
     imgP = "../images/cercleR0.png";  
   } else if (p>=12.5 && p<37.5){
     imgP ="../images/cercleR25.png";
   } else if (p>=37.5 && p<62.5){
    imgP = "../images/cercleR50.png";
   } else if (p>=62.5 && p<87.5){
     imgP = "../images/cercleR75.png";
   } else if (p>=87.5 && p<=100){
     imgP = "../images/cercleR100.png";
   }
   //console.log('Moyenne :',p);
   document.getElementById("cercleR").src = imgP;
 }
 
 function ch_img(idImg){
   //utilisation des data attributes pour stocker l'infos de l'image affichée
   //https://developer.mozilla.org/fr/docs/Apprendre/HTML/Comment/Utiliser_attributs_donnes
   var img = document.getElementById(idImg);
   var img_num = parseInt(img.dataset.numimg) +1 ;
   console.log("id_img", idImg,"img_num",img_num);
   img.src = "../images/box"+img_num+".png";
   
   if(img_num>=8){
     img.dataset.numimg = 0;
   }else{
     img.dataset.numimg = img_num;
   }
  }
 
 
 </script>

 </body>
</html>

    0
    1. Utilisateur anonyme
       
      Bonjour,
      Avec Jordane, vous avez un exemple de ce qui peut se faire de mieux en matière de concision et donc de clarté du code : la façon de nommer les variables, les déclarations de variables globales ou locales.... J'en apprend beaucoup en lisant ses exemples de programmes !

      Elle a mis le doigt sur un point qui méritait vraiment d'être changé : la recherche de l'état des checkbox.

      A part ça, un truc vraiment utile pour débuguer, c'est l'utilisation des outils de développement web intégrés aux navigateurs. On y accède avec Ctrl+Maj+I.
      Parmi tous les outils, la console permet :
      - de connaître l'emplacement et nature des erreurs de syntaxe ;
      - d'espionner le contenu d'une variable : exemple en décommentant la ligne 78 (Jordane45) on verra "p" ou en ajoutant un "console.log(tf)" dans votre code initial plutôt que "alert(tf)"

      Bonne continuation
      0
  7. henri
     
    merci beaucoup tout et parfait maintenant vous aviez juste oublier de définir la variable t (nombres de cases total) et ne coprend pas la fonction qui permet de calculer le nombre de cases qui sont cochées
    0
    1. jordane45 Messages postés 30426 Date d'inscription   Statut Modérateur Dernière intervention   4 830
       
      Tu penseras à mettre le sujet en RESOLU.
      0

Discussions similaires

URGENT - codes ALT + ???
infotruc -
infotruc -

2 réponses
exo pix
Xtyller -
Raymond PENTIER -

2 réponses
cocher des cases
beli -
karine -

6 réponses
garder constant des calculs
jack2125 -
PHILOU10120 -

4 réponses
cocher une case avec le clavier
Pikoulon -
Fitz -

10 réponses