Discussion :

[dominos]

D'après la méthode de psychadelic , ça me retourne le message "TypeError: ul.target is undefined"

Code :

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

1
2
3
4
5
6
7
8
9
 
function test(elm) {
var ul = document.getElementById('maliste');
 
	ul.onclick = function(){
	  if (ul.target.matches('li[data-value]')) {
		  ul.target.dataset.value;
	  }
	 }}

[Invité]

Tu ne vois pas qu'il manque une apostrophe ?

[dominos]

non c'est une erreur de frappe sur le forum...

[Invité]

Bon...
Vu que tu n'apportes pas plus d'explications...

Pour récupérer l'INDEX du <li> cliqué :

Code HTML :

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

1
2
3
4
5
6
  <ul id="maliste" class="dropdown-menu">
   <li data-value="123" onclick="test(this)">0</li>
   <li data-value="456" onclick="test(this)">1</li>
   <li data-value="789" onclick="test(this)">2</li>
   <li data-value="000" onclick="test(this)">3</li>
  </ul>

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
// ---------
function test(elt)
{
  // 1- VALEUR
  var val = elt.dataset.value; // récupération du data-value
  console.log( val );
 
  // 2- INDEX
  var index = getNodeindex(elt);
  console.log( index );
}
// ---------
// Récupérer l'INDEX d'un élément (noeud)
function getNodeindex( elt ){ 
  var c = elt.parentNode.children, i = 0;
  for(; i < c.length; i++ ){
    if( c[i] == elt ) return i;
  }
}
// ---------

[psychadelic]

D'après la méthode de psychadelic , ça me retourne le message "TypeError: ul.target is undefined"
[CODE]
function test(elm) {
var ul = document.getElementById('maliste');
....

mauvaise retranscription de ma fonction fléchée

Code :

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

1
2
3
4
5
6
7
const   ListeUL = document.getElementById('maliste');
 
ListeUL.onclick = function(event) {
   if (event.target.matches('li[data-value]')) {
     eventl.target.dataset.value;
  }
}

[dominos]

Merci infiniment pour vos nombreux exemples, j'ai finalement opté pour un mixte de ce qui me semble être le plus simple...

Code HTML :

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

1
2
3
4
5
6
<ul id="maliste" class="dropdown-menu">
 <li data-value="123" onclick="test(this)">0</li>
 <li data-value="456" onclick="test(this)">1</li>
 <li data-value="789" onclick="test(this)">2</li>
 <li data-value="000" onclick="test(this)">3</li>
</ul>

Code :

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

1
2
3
4
5
6
7
function test(elm) {
	var ul = document.getElementById('maliste');
	ul.onclick = function(){
	    var li_val = elm.dataset.value;
	    console.log( li_val );
    }
}

Remerciements, bonne journée !

[Invité]

Un onclick dans une fonction appelé... par onclick...
C'est n'importe quoi......

[dominos]

Code :

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

1
2
3
4
5
6
7
const   ListeUL = document.getElementById('maliste');
 
ListeUL.onclick = function(event) {
   if (event.target.matches('li[data-value]')) {
     event.target.dataset.value;
  }
}

Parfait !

[dominos]

Un onclick dans une fonction appelé... par onclick...
C'est n'importe quoi......


J'abandonne...

Je ne comprends pas trop... onclick intercepte l'évènement non ?

[Invité]

Tu as conscience que tu nous as menés en bateau, avec ta "fonction test()", et tes INDICES, qui au final, ne servent à rien ???


Et pour la prochaine fois, tu sauras qu'il s'agit ici de "délégation d'évènement" :

• Comprendre la délégation d'événement en JavaScript

Oh ! Surprise ! Le 1er exemple est QUASIMENT LE MÊME que le tien !

[...]
• Lorsque l'on souhaite associer des événements similaires à différents éléments.
Par exemple, imaginons que l'on souhaite afficher un texte initialement masqué en cliquant sur des items d'une liste ordonnée. Plutôt que de définir autant d'événement que d'éléments dans la liste, on pourra n'en utiliser qu'un seul placé sur la balise <ul>
[...]

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<ul id="maListe"> 
    <li class="element" data-texte="foo">Item 1</li> 
    <li class="element" data-texte="bar">Item 2</li> 
    <li class="element" data-texte="baz">Item 3</li> 
    <li class="element" data-texte="toto">Item 4</li> 
    <li class="element" data-texte="titi">Item 5</li> 
    <li class="element" data-texte="tata">Item 6</li> 
    <li>Item 7</li> 
    <li>Item 8</li> 
    <li>Item 9</li> 
    <li class="element" data-texte="42">Item 10</li> 
</ul>

Code JavaScript :

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

1
2
3
4
5
6
7
document.getElementById('maListe').addEventListener('click', function(e){ 
    var initElem = e.target; 
    if(initElem.className != 'element'){ // Si l'élément n'est pas un de ceux à traiter 
        return; 
    } 
    alert(initElem.dataset.texte); 
});

C'est DINGUE, non ?

[psychadelic]

Je ne comprends pas trop... onclick intercepte l'évènement non ?

oui mais toi tu l’utilise en double
une fois sur chaque element li <li data-value="123" onclick="test(this)" > 0 </li>et une autre fois sur dans ta fonction test

Code :

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

1
2
3
function test(elm) {
 /.../
   ul.onclick = function(){

....

[Invité]

Juste pour info...

En syntaxe jQuery, ça s'écrit simplement :

Code jQuery :

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

1
2
3
$('#maliste').on('click', 'li', function() {
     var valeur = $(this).data('value');
});

Mais c'est très bien (voire MIEUX) de savoir le faire en JavaScript pur !

Code JavaScript :

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

1
2
3
4
document.getElementById('maliste').addEventListener('click', function(e){
  var valeur = e.target.dataset.value;
  console.log(valeur);
});

[dominos]

C'est parfait ! merci !

Code :

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

1
2
3
4
5
6
function test(elm) {
	var ul = document.getElementById("maliste");
	ul.addEventListener('click', function(e){
	    console.log( e.target.dataset.value );
	});
}

Ps: pour le bateau... j'aimerais bien, surtout en cette période de confinement...

[Invité]

Non, mais c'est encore et toujours n'importe quoi...
Ce n'est pas possible, tu le fait exprès ?

SÉRIEUX... MONTRE LE CODE HTML de la liste !

Je t'ai donné LA SYNTAXE CORRECTE dans mon précédent message !

Raccourcis clavier :

• COPIER : "Ctrl" + "C"
• COLLER : "Ctrl" + "V"

[dominos]

Code HTML :

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

1
2
3
4
5
6
<ul id="maliste" class="dropdown-menu">
 <li data-value="123" onclick="test(this)"></li>
 <li data-value="456" onclick="test(this)"></li>
 <li data-value="789" onclick="test(this)"></li>
 <li data-value="000" onclick="test(this)"></li>
</ul>

Pa bon ?

le elm dans la fonction me sert à autre chose, il est nécessaire....

en tout cas merci pour l'équivalent en jquery, c'est plus simple.

[psychadelic]

C'est parfait ! merci !

Code :

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

function test(elm) ....

mais pourquoi tu t’acharne à vouloir garder cette fonction test ?

Elle est completement inutile!
il faut simplement placer tes éléménts LI <li data-value="123" >aaa</li> (pris dans mon code) ici il n'y a pas de fonction test

[Invité]

@psychadelic
Je pense que dominos ne sait pas faire de copier-coller...


@dominos
Est-ce qu'au moins tu livres des pizzas ??

[dominos]

Elle m'est nécessaire, car j'ai d'autres choses rattachés dessus. Bonne journée ! Merci encore.

[dominos]

@psychadelic
Je pense que dominos ne sait pas faire de copier-coller...


@dominos
Est-ce qu'au moins tu livres des pizzas ??

Maj+Suppr / Maj+Inser (Humour!)

[Invité]

le elm dans la fonction me sert à autre chose, il est nécessaire....

Ce elm est égal à e.target !!! (en JS pur) ou à $(this) (en jQuery)

SÉRIEUX !! FAIS UN EFFORT POUR COMPRENDRE le code qu'on te donne !!!
VA RESPIRER et t'aérer la tête !! (à la fenêtre)

Code :

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

1
2
3
4
5
6
7
document.getElementById('maliste').addEventListener('click', function(e){
     var elm = e.target;
     var valeur = elm.dataset.value;
     console.log(valeur);
     // SUITE DE TON CODE ......
 
});

ou

Code :

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

1
2
3
4
5
6
7
$('#maliste').on('click', 'li', function() {
     var elm = $(this);
     var valeur = elm.data('value');
     console.log(valeur);
     // SUITE DE TON CODE ......
 
});

N.B. Rassure-toi : je ne suis pas du tout "fâché".
C'est juste "théatral" !

Cela dit, les sont mérités !

• tu sembles incapable de copier-coller les codes (HTML + JS) qu'on te donne, pour les TESTER !
• sans compter que tu nous y a fait passer la journée... (40 messages... pour une simple "délégation" )