Salut à tous, imaginons que j'ai cette page (x)HTML

<ul id="quizz">
    <li>Réponse 1</li>
    <li>Réponse 2</li>
    <li>Réponse 3</li>
</ul>

Comment applique une fonction javascript, que j'aurai écrite, sur l'ensemble des balises <li>.
Par exemple au lieu de mettre onclick="mafonction();" sur chaque <li>, je veux que par défaut dans cette liste a puce, quand on clique sur une puce <li>, que la fonction mafonction() s'exécute.

Merci d'avance.

// au chargement de la page
window.addEventListener('load', function() {
	
	// on récupère l'élément d'id "quizz"
	var quizz = document.getElementById('quizz'); 
	
	// dans cet élément, on récupère tous les <li>
	var lis = quizz.getElementsByTagName('li');
	
	// on parcourt les <li> récupérés
	for(var i = 0; i < lis.length; i++) {
		
		// et on leur ajoute l'évènement
		lis[i].addEventListener('click', mafonction, false);
		
	}

}, false);

addEventListener [fr]
getElementById [fr]
getElementsByTagName [fr]

Merci pour ta réponse. Et si par exemple je veux utiliser ma fonction de surlignage

function highlightThis(label) 
{
    /* On deselectionne d'abord tous les <li> */
    var li = document.getElementById('quizz').getElementsByTagName('li');
    for(var i=0; i<li.length; i++) 
    	li[i].className = "normal";
    
    /* On selectionne ensuite le <li> demandé */
    label.className = "highlight";
}

Elle permet de remettre le fond blanc a tout les <li>, et mettre un fond gris au <li> cliqué.
Comment l'intégrer ?

Merci d'avance

Dans une fonction attachée à un élément html avec addEventListener, le mot-clé this fait référence à l'élément sur lequel l'évènement à lieu.

Donc:

function highlightThis(label) 
{
    /* On deselectionne d'abord tous les <li> */
    var li = document.getElementById('quizz').getElementsByTagName('li');
    for(var i=0; i<li.length; i++) 
    	li[i].className = "normal";
    
    /* On selectionne ensuite le <li> demandé */
    this.className = "highlight";
}

résoudrait ton problème =)

Merci beaucoup ça marche niquel
Par contre, a chaque clique la fonction s'exécute deux fois ? Est-ce que tu sais pourquoi ?

Merci d'avance.

sans le code complet, je vois pas vraiment.

Au pif, je dirais que c'est parce que tu a laissé les onclicks dans le html ?

Non, bien pensé mais c'est pas ça
Voici mon code:

<ul id="quizz">
    <li><label><input type="radio" name="answer" value="1" /> Hampi</label></li>
    <li><label><input type="radio" name="answer" value="2" /> Mumbai</label></li>
    <li><label><input type="radio" name="answer" value="3" /> Ajantâ</label></li>
    <li><label><input type="radio" name="answer" value="4" /> Agrâ</label></li>
</ul>

function highlightThis () 
{
    /* On deselectionne d'abord tous les <li> */
    var lis = document.getElementById('quizz').getElementsByTagName('li');
    
    var radios = document.getElementById('quizz').getElementsByTagName('input');
    
    if (radios[0].disabled != true) {
    
    	// on parcourt les <li> récupérés
    	for(var i = 0; i < lis.length; i++)
    		lis[i].className = "normal";
    
    	/* On selectionne ensuite le <li> demandé */
    	this.className = "highlight"; 
    	alert('ok');
    }
}

window.addEventListener('load', function() {

	// on récupère tous les <li> dans "ul#quizz"
	var lis = document.getElementById('quizz').getElementsByTagName('li'); 
		
	// on parcourt les <li> récupérés
	for(var i = 0; i < lis.length; i++) {
		
		// et on leur ajoute l'évènement
		lis[i].addEventListener('click', highlightThis, false);	
	}

}, false);

J'ai rajouté le alert('ok'); pour témoigner du deuxième passage !

Merci d'avance.

héhé, ça vient tout simplement du <label> qui envoie un event click sur l'<input>, et via la magie du DOM et de la propagation des évènements, cet event se répercute sur le <li>. D'où une fonction qui s'exécute 2 fois (je sais pas si j'ai été très clair , surtout si tu n'es pas habitué à la propagation des évènements dans le DOM).

En tous cas, voici un workaround :

function highlightThis (e) 
{
	if(e.target.tagName.toLowerCase() == 'label') // e.target était soit le <label>, soit l'<input>. J'ai pris label, mais c'est tout à fait arbitraire 
		return;
	/* On deselectionne d'abord tous les <li> */
	var lis = document.getElementById('quizz').getElementsByTagName('li');
	
	var radios = document.getElementById('quizz').getElementsByTagName('input');
	
	if (radios[0].disabled != true) {
	
		// on parcourt les <li> récupérés
		for(var i = 0; i < lis.length; i++)
			lis[i].className = "normal";
	
		/* On selectionne ensuite le <li> demandé */
		this.className = "highlight"; 
		alert('ok');
	}
}

Wahouuu ça marche !!! Merci pour le code et l'explication

Bonne journée à toi