Calculer le pourcentage de nombre de cases cochée [Résolu]

Signaler
-
Messages postés
31121
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 janvier 2021
-
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

Messages postés
261
Date d'inscription
samedi 7 novembre 2020
Statut
Membre
Dernière intervention
17 janvier 2021
60
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.
>
Messages postés
261
Date d'inscription
samedi 7 novembre 2020
Statut
Membre
Dernière intervention
17 janvier 2021

Merci, avez-vous d'autres erreurs qui empêche le programme de fonctionner?
Messages postés
261
Date d'inscription
samedi 7 novembre 2020
Statut
Membre
Dernière intervention
17 janvier 2021
60 > henri
OH QUE OUI !

le php s'écrit entre les balises <?php ... ?>
<script> </script> c'est pour javascript !
>
Messages postés
261
Date d'inscription
samedi 7 novembre 2020
Statut
Membre
Dernière intervention
17 janvier 2021

Oui je sais mais mon programme est en javascript.
Messages postés
261
Date d'inscription
samedi 7 novembre 2020
Statut
Membre
Dernière intervention
17 janvier 2021
60 >
Messages postés
261
Date d'inscription
samedi 7 novembre 2020
Statut
Membre
Dernière intervention
17 janvier 2021

et au lieu de faire plusieurs if(p>=... && p<...) dstincts, on peut optimiser le traitement en enchainant le premier if avec elseif
>
Messages postés
261
Date d'inscription
samedi 7 novembre 2020
Statut
Membre
Dernière intervention
17 janvier 2021

comme ça?
<p class=textbox> <input type="checkbox" id="box1"  onclick="moy(this);nbtf(this)" > objectif 1 </p>
<p class=textbox> <input type="checkbox" id="box2"  onclick="moy(this);nbtf(this)"/> objectif 2</p>
<p class=textbox> <input type="checkbox" id="box3"  onclick="moy(this);nbtf(this)"/> objectif 3</p>
<p class=textbox> <input type="checkbox" id="box4"  onclick="moy(this);nbtf(this)"/> objectif 4</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";
			
		}
		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";
		}
	}
</script>
Messages postés
261
Date d'inscription
samedi 7 novembre 2020
Statut
Membre
Dernière intervention
17 janvier 2021
60
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 ?
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.
Messages postés
261
Date d'inscription
samedi 7 novembre 2020
Statut
Membre
Dernière intervention
17 janvier 2021
60
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 ?
>
Messages postés
261
Date d'inscription
samedi 7 novembre 2020
Statut
Membre
Dernière intervention
17 janvier 2021

Pas de problème.
Non, le programme ne fonctionne pas.
Messages postés
261
Date d'inscription
samedi 7 novembre 2020
Statut
Membre
Dernière intervention
17 janvier 2021
60 > 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...
>
Messages postés
261
Date d'inscription
samedi 7 novembre 2020
Statut
Membre
Dernière intervention
17 janvier 2021

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>
Messages postés
261
Date d'inscription
samedi 7 novembre 2020
Statut
Membre
Dernière intervention
17 janvier 2021
60
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>
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.
Messages postés
31121
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 janvier 2021
3 201
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>

Messages postés
261
Date d'inscription
samedi 7 novembre 2020
Statut
Membre
Dernière intervention
17 janvier 2021
60
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
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
Messages postés
31121
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
22 janvier 2021
3 201
Tu penseras à mettre le sujet en RESOLU.