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.

Action Javascript en fonction du boutton cliqué

JavaScript

Vue hybride

Discussions similaires

Partager

Partager