Discussion :

[jd440]

Bonjour à tous.

Je cherche en javascript "Pur" (sans Jquery ou autre), déclancher un ensemble d'action lors de click sur des bouton ayant un class commune.

J'arrive à effectuer la même action lors d'un click sur n'importe quel élément de la class.
Mais mon soucis est maintenant de changer l'affichage du bouton cliqué, et récupérer un data- de se boutons en question.
Est possible en passant par la class ou dois je obligatoirement passer par id?

Je vous joins le code.

Code :

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
<script type="text/javascript">
var classname = document.getElementsByClassName("boutons");
 
var myFunction = function() {
	var support = clique.dataset.support;
	console.log(support);
 
	var url_to_pluser = 'http://[...]/ajax.php?support='+support;
	console.log(url_to_pluser);
 
	request = new XMLHttpRequest();
	request.open('GET', url_to_pluser, true);
 
	request.onload = function() {
	  if (request.status >= 200 && request.status < 400){
    		document.getElementById('count_test').innerHTML = request.responseText;
	  } else {
	  }
	};
 
	request.onerror = function() {
	};
 
	request.send();
};  
 
    for(var i=0;i<classname.length;i++){
    	var clique = classname[i];
        classname[i].addEventListener('click', myFunction, false);
    }
</script>

[Bovino]

Il y a certains concepts que tu ne comprends manifestement pas encore...

Est possible en passant par la class ou dois je obligatoirement passer par id?

Tu n'affectes pas un événement à une classe ou à un id mais à un élément du DOM. La façon dont tu as récupéré cet élément est sans importance.

Code :

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

1
2
3
4
for(var i=0;i<classname.length;i++){
 var clique = classname[i];
 classname[i].addEventListener('click', myFunction, false);
}

Es-tu conscient que cette boucle va s'exécuter entièrement avant que tu n'aies p cliquer sur aucun élément. Donc à chaque itération, tu réaffectes la variable clique, reste à savoir, quand tu cliqueras sur un élément (donc bien après la fin de l'exécution de la boucle) ce que vaudra la variable...

Heureusement, des mécanismes permettent de savoir quel élément à été cliqué, notamment avec l'objet Event.

[jd440]

Je te remercie pour ton aide.

Effectivement c'est bien ce qui me posais problème puisque forcement la dernièr itereation de la boucle définissait ma variable clique, et je ne voyais pas comment récupérer l'élément ayant cliquer.

Concernant l'id vs class, l'avantage avec l'id était que l'on connaissais l'élément puisqu'il n'y en as qu'un.

Donc je refait mon script en utilisant l'objet Event:

Code :

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
window.addEventListener("load",function(){
	var myFunction = function(event) {
		var myElement = event.target; 
		myElement.className = myElement.className + " done";
		var support = myElement.dataset.support;
 
		//var support = 'fb';
		var url_to_pluser = '/test/new_sprite_ajax/ajax.php?support='+support;
		console.log(url_to_pluser);
 
		request = new XMLHttpRequest();
		request.open('GET', url_to_pluser, true);
 
		request.onload = function() {
		  if (request.status >= 200 && request.status < 400){
		    // Success!
	    		document.getElementById('count_test').innerHTML = request.responseText;
		  } else {
		    // We reached our target server, but it returned an error
 
		  }
		};
 
		request.onerror = function() {
		  // There was a connection error of some sort
		};
 
		request.send();
 
 
 
 };  
 
document.querySelector('#pinterest').onclick = myFunction;
}, false)

Ce qui fonctionne parfaitement et je te remercie.



en revanche j'ai essayer de cibler la classe par le biais de :
document.querySelectorAll(".boutons").onclick = myFunction;

Mais le script ne se lance pas, et je ne comprend pas ou les soucis?

Edit: J'avais pas assez lu ton message.
Du coup je n'avais pas assimiler toute la porter, concernant l'attribution à un élement du Dom, et non à la class.

du coup j'ai fait:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
var boutons = document.querySelectorAll(".boutons");
window.addEventListener("load",function(){
	var myFunction = function(event) {
		var myElement = event.target; 
		[...]
	};  
 
    for(var i=0;i<boutons.length;i++){
        boutons[i].onclick = myFunction;
    }
}, false)

[Watilin]

en revanche j'ai essayer de cibler la classe par le biais de :
document.querySelectorAll(".boutons").onclick = myFunction;

Mais le script ne se lance pas, et je ne comprend pas ou les soucis?

As-tu essayé d'examiner document.querySelectorAll(".boutons"); dans ta console ?

Code :

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

console.log(document.querySelectorAll(".boutons"));