Récupérer value d'un <li> sans id

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

Code:

---

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; } }}

---

:oops:

Tu ne vois pas qu'il manque une apostrophe ?

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

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

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

Code:

---

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:

---

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; } } // ---------

---

Citation:

---

Envoyé par dominos

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:

---

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; } }

---

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

Code:

---

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:

---

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 ! :ccool:

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

Code:

---

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 !

Citation:

---

Envoyé par jreaux62

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


J'abandonne...

---

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

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


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 !

Citation:

---

[...]
• 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:

---

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:

---

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 ? :fou:

Citation:

---

Envoyé par dominos

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:

---

1 2 3

function test(elm) { /.../ ul.onclick = function(){

---

.... :roll:

Juste pour info...

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

Code:

---

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 ! :ccool:

Code:

---

1 2 3 4

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

---

C'est parfait ! merci !

Code:

---

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... :oops:

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"

Code:

---

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.

Citation:

---

Envoyé par dominos

C'est parfait ! merci !

Code:

---

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

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


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

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

Citation:

---

Envoyé par jreaux62

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


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

---

Maj+Suppr / Maj+Inser (Humour!)

Citation:

---

Envoyé par dominos

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:

---

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:

---

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 :moinsser: sont mérités ! :sm:

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