Action Javascript en fonction du boutton cliqué

**lemzo84** · 18/04/2020, 16h39

Bonjour,

J'ai une page web sur laquelle j'ai 3 boutons. Le premier bouton a comme valeur 2 euros, le second 5 euros et le troisième 10 euros. J'ai un code javascript associe et je veux que le code réagissent en fonction du button que j'ai cliqué. Actuellement, il ne réagit qu'au premier bouton de 2 euros. Auriez-vous une idée de comment faire réagir le code javascript en fonction du bouton cliqué.
Merci d'avance.

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.4.1.min.js">
	</script>
</head>
<body>
	<button id="boutton" value="2">	
		Envoyer 
	</button>
	<button id="boutton" value="5">	
		Envoyer
	</button>
	<button id="boutton" value="10">	
		Envoyer
	</button>
</body>
 
<script type="text/javascript"> 
 
        const btn = document.querySelector('#boutton');
        const btVal = btn.value;
        
 
        bouton.addEventListener("click", function(){
                $.ajax({
                url:'test.php',
                type: 'POST',
                data: {amount: parseInt(btVal},
                        
 
                success: function (json_data) {
                        window.location.replace(json_data);
                },
                error: function() {
                    console.log("data not found");
                }
        });
        }); 
</script>
 
</html>

**javatwister** · 18/04/2020, 17h25

Salut,

Déjà, tu aurais une id pour chaque bouton, ce serait un peu plus cohérent...

**javatwister** · 18/04/2020, 17h47

Imaginons une classe css "boutons"; tu récupères l'ensemble des éléments de la classe avec

Code javascript :

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

const mes_boutons=document.querySelectorAll(".boutons");

Et puis tu lances le gestionnaire "click" pour chacun des éléments:

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const mes_boutons=document.querySelectorAll(".boutons");
mes_boutons.forEach(b => {b.addEventListener("click", function(){
	$.ajax({
		url:'test.php',
		type: 'POST',
		data: {amount: this.value},
		success: function (json_data) {
			window.location.replace(json_data);
		},
		error: function() {
			console.log("data not found");
		}
	});
}); 
})

Quelque chose comme ça;

**lemzo84** · 18/04/2020, 19h08

En fait, le code Javascript doit réagir uniquement en fonction du bouton que j'ai cliqué. En testant avec ton code, je n'ai pas de réaction de la part des boutons. Ce que je propose c'est de mettre un ID différent a chaque bouton. Par exemple, bouton1, bouton2 et bouton3. Que me suggérerais-tu dans ce cas ? Merci d'avance.

**javatwister** · 18/04/2020, 19h16

Code html :

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

1
2
3
<button class="boutons" value="2">Envoyer</button>
<button class="boutons" value="5">Envoyer</button>
<button class="boutons" value="10">Envoyer</button>

**lemzo84** · 18/04/2020, 19h33

Ça marche. Merci bcp Javatwister pour ton aide super précieuse. Cependant, j'ai une erreur au niveau de la ligne suivante:

Code :

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

1
2
 
mes_boutons.forEach(b => {b.addEventListener("click", function(){

J'ai essayé avec le Array.from() comme ceci mais sans succes:

Code :

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

1
2
 
Array.from(mes_boutons).forEach(b => {b.addEventListener("click", function(){

J'ai regardé dans la doc de forEach mais je ne vois rien. Aurais-tu une idée?
Merci encore.

**javatwister** · 23/04/2020, 14h09

c'est parce que tu testes avec Explorer... auquel je n'ai pas pensé;

Code javascript :

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

1
2
3
4
5
for(let i = 0; i < mes_boutons.length; i++) {
	mes_boutons[i].addEventListener("click", function(){
       // action
       })
}

**lemzo84** · 26/04/2020, 15h35

Bonjour JavaTwister,

J'ai toujours une erreur sur IE au niveau de la ligne commençant par for.
Ensuite sur chaque bouton, je veux insérer un code produit de telle sorte que lorsque je clique sur un bouton, en plus du montant en euros, il me prend en compte le code du produit. Aurais-tu une idée si possible.
Un grand Merci à toi.

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.4.1.min.js">
	</script>
</head>
<body>
 
<button class="boutons" value="2" CODE="CodeProduit1">Envoyer</button>
<button class="boutons" value="5" CODE="CodeProduit2">Envoyer</button>
<button class="boutons" value="10" CODE="CodeProduit3">Envoyer</button>
 
</body>
 
<script type="text/javascript">
 
const mes_boutons=document.querySelectorAll(".boutons");
for(let i = 0; i < mes_boutons.length; i++) {
        mes_boutons[i].addEventListener("click", function(){
        $.ajax({
                url:'test.php',
                type: 'POST',
                data: {amount: this.value},
                success: function (json_data) {
                        window.location.replace(json_data);
                },
                error: function() {
                        console.log("data not found");
                }
        });
}); 
})
 
</script>

**ProgElecT** · 26/04/2020, 15h51

Salut

Il me semble bien que toutes les versions de Ie ne supporte pas le let, remplacer par un var.

**lemzo84** · 26/04/2020, 16h16

Bonjour,

J'ai tjrs une erreur. J'ai attaché la capture d'ecran.
Merci.
Nom : Capture.JPG
Affichages : 2165
Taille : 37,2 Ko

**ProgElecT** · 26/04/2020, 16h26

Que donne console.log("Valeur de mes_boutons",mes_boutons); que tu mes juste avant la ligne For?

**lemzo84** · 26/04/2020, 16h38

Les boutons ne réagissent pas et je n'ai aucun message qui apparaît sur IE ou sur Chrome.

**javatwister** · 26/04/2020, 16h44

Parenthèse fermante en trop à la fin...

**lemzo84** · 26/04/2020, 16h51

Parenthèse enlevée et plus d'erreurs affichées mais tjrs aucune réaction des boutons...

**ProgElecT** · 26/04/2020, 17h01

@ javatwister, en effet, j'ai corrigé pour essayer, voici le code

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
 
<button class="boutons" value="2" CODE="CodeProduit1">Envoyer</button>
<button class="boutons" value="5" CODE="CodeProduit2">Envoyer</button>
<button class="boutons" value="10" CODE="CodeProduit3">Envoyer</button>
 
 
<script>
 
const mes_boutons=document.querySelectorAll(".boutons");
console.log("Valeur de mes_boutons",mes_boutons);
for(let i = 0; i < mes_boutons.length; i++) {
        mes_boutons[i].addEventListener("click", function(){
        $.ajax({
                url:'test.php',
                type: 'POST',
                data: {amount: this.value},
                success: function (json_data) {
                        window.location.replace(json_data);
                },
                error: function() {
                        console.log("data not found");
                }
        });
});
};
 
</script>
</body>
</html>

@lemzo84, Je n'ai pas d'erreur en console sous Ie mais data not found pour tout les butons cliqués.

**lemzo84** · 26/04/2020, 17h29

@ProgElecT, çà marche. En fait les valeurs des boutons sont trop faibles et c'est pour cela que tu avais data not found. J'ai remplacé let par var et ça fonctionne sur IE et sur Chrome (enfin....

). Il reste le fait d'associer le code produit de chaque bouton pour qu'en plus du montant, je puisse récupérer le code produit. Auriez-vous une idée?
Voici le code:

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
 
<button class="boutons" value="2000" id ="CodeProduit1" >Envoyer</button>
<button class="boutons" value="5000" id ="CodeProduit2">Envoyer</button>
<button class="boutons" value="10000" id ="CodeProduit3">Envoyer</button>
 
 
<script>
 
const mes_boutons=document.querySelectorAll(".boutons");
console.log("Valeur de mes_boutons",mes_boutons);
 
for(var i = 0; i < mes_boutons.length; i++) {
        mes_boutons[i].addEventListener("click", function(){
        $.ajax({
                url:'test.php',
                type: 'POST',
                data: {amount: this.value},
                success: function (json_data) {
                        window.location.replace(json_data);
                },
                error: function() {
                        console.log("data not found");
                }
        });
});
};
 
</script>
</body>
</html>

**lemzo84** · 27/04/2020, 01h31

Pour récupérer le code du produit, voila ce que j'ai essayer mais ça ne marche pas (ça ne récupère que le montant). Auriez-vous une idée ?
Merci encore.

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
 
<button class="boutons" value="2000" id="CodeProduit1" >Envoyer</button>
<button class="boutons" value="5000" id="CodeProduit2">Envoyer</button>
<button class="boutons" value="10000" id="CodeProduit3">Envoyer</button>
 
 
<script>
const mes_boutons=document.querySelectorAll(".boutons");
console.log("Valeur de mes_boutons",mes_boutons);
const product = document.querySelectorAll(".id");
const productID = product.innerHTML;
 
for(var i = 0; i < mes_boutons.length; i++) {
        mes_boutons[i].addEventListener("click", function(){
        $.ajax({
                url:'test.php',
                type: 'POST',
                data: {amount: this.value, productId: productID,},
                success: function (json_data) {
                        window.location.replace(json_data);
                },
                error: function() {
                        console.log("data not found");
                }
        });
});
};
 
</script>
</body>
</html>

**Beginner.** · 27/04/2020, 07h46

Salut,

Envoyé par lemzo84

Pour récupérer le code du produit, voila ce que j'ai essayer mais ça ne marche pas (ça ne récupère que le montant). Auriez-vous une idee ?

Tu peux supprimer les lignes 18 et 19 et à la ligne 26 remplace productID par this.id...

**javatwister** · 27/04/2020, 10h09

et pendant que tu y es, élimines ces 2 lignes comiques:

Code :

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

1
2
const product = document.querySelectorAll(".id");
const productID = product.innerHTML;

**Beginner.** · 27/04/2020, 15h05

Salut,

Envoyé par javatwister

et pendant que tu y es, élimines ces 2 lignes comiques:

Oui c'est de ces lignes (18 & 19) dont je parlais...

Action Javascript en fonction du boutton cliqué

JavaScript

Discussions similaires

Partager

Partager