Compteur décompteur au clic sur images

**lherbaux** · 01/02/2019, 10h29

bonjour,

j'ai essayé de faire un compteur décompteur, mais ça ne fais que compter. comment puis-je régler ce problème ?

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
 
<!compteur mise à zéro>
<script>
$(document).ready(function(){
var compteurClic = 0;
 
<!compte de clic>
$('img').click(function(){
compteurClic++;
console.log(compteurClic);
$('span').text(compteurClic)
})
 
});
</script>
 
<!affiche du dessin +>
<body>
<img src="plus.jpg" />
</body>
 
<!décompte de clic>
<script>
$('img').click(function(){
compteurClic--;
console.log(compteurClic);
$('span').text(compteurClic)
})
 
});
</script>
 
<!affiche du dessin ->
<body>
<img src="moins.jpg" />
</body>
 
<!affiche le mot compteur et la valeur>
<div>Compteur <span>0</span></div>
</body>
 
</head>
</html>

merci d'avance. à bientôt.

Invité · 01/02/2019, 10h46

Bonjour,

En commençant par donner plus d'explications, et en mettant des commentaires dans ton code.

Nous ne sommes pas tes serviteurs...

Indice : regroupe les scripts.
Tu devrais voir le souci...

**lherbaux** · 01/02/2019, 11h01

quand je lance le html, j'ai vois une image du signe "+" et une image du signe "-" et en dessous inscrit "compteur".

ce que je voudrais : quand je clique sur l'image du plus , le compteur compte et quand je clique sur le moins, le compteur décompte.

ce qui se passe avec mon programme , le compteur ne fait que compter même quand je clique sur le moins.

**ProgElecT** · 01/02/2019, 11h34

Salut

Tu as plusieurs <body>...</body>
Tu as les body pris dans les balises <head>...</head>
Tu as des mises en commentaires mélangés , // pour le Javascript et /* pour le CSS */
Reprends la rédaction du code avec indentation , tu y verras plus claire.
Ton code doit être syntaxiquement de ce type

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="fr"> <!-- BaseModel.html -->
	<head>
		<meta http-equiv="content-type" content="text/html"; charset="utf-8"/>
		<title>Ici mon titre</title>
 
		<style>
                        /* TAGs comentaire dans la partie style */
                </style>
 
		<script>
                        'use strict'; // force la déclaration des variables
                        function model() {
                        }//----------------------fin de la function model -----------------------------------
                </script>
 
	</head>
	<body>
		<!-- la partie affichée sur la page -->
		Bonjour le monde
 
		<script>
                        //---------------------- du javascript complémentaire -----------------------------------
                </script>
 
	</body>
</html>

Invité · 01/02/2019, 11h53

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
$('img').click(function(){
compteurClic++;
//...
})
//...
$('img').click(function(){
compteurClic--;
//...
})

Tu ne vois pas le problème ?

Comment identifies-tu les images ?
tu as 2 fonctions liées au "clic" sur une "img" (sans préciser laquelle) : la 2ème est ignorée (ou plutôt, crée une erreur.

**lherbaux** · 01/02/2019, 11h54

comment faire pour associer la fonction compte ou decompte au dessin correspondant ?

Invité · 01/02/2019, 11h57

Une solution :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<img id="compte-plus" src="plus.jpg" />
<img id="compte-moins" src="moins.jpg" />
<div>Compteur <span id="compteur">0</span></div>

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function() {
  var compteurClic = 0;
 
  $("#compte-plus").on('click',function() {
    compteurClic++;
    $("#compteur").text(compteurClic);
  });
 
  $("#compte-moins").on('click',function() {
    compteurClic--;
    $("#compteur").text(compteurClic);
  });
});

Compteur décompteur au clic sur images

jQuery

Vue hybride

Discussions similaires

Partager

Partager