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

Version imprimable

Voir 40 message(s) de cette discussion en une page

28/04/2020, 20h32
dominos

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

Savez-vous s'il est possible de récupérer la valeur d'une balise <li> sans utiliser d'id, juste par le click sur l'élément.. du genre onclick="test(this)" ?
Code:

1 2 3 function test(elm) { alert(document.getElementById(elm).getAttribute('value')); }
d'avance merci pour votre réponse...
28/04/2020, 21h59
psychadelic

dans le langage HTML les éléments LI ne peuvent pas avoir d'attributs value.

Sinon on peut retrouver le texte ou le code HTML qu'il contient en utilisant l'arborescence auquel il appartient.
29/04/2020, 07h34
dominos
Citation:

Envoyé par psychadelic

dans le langage HTML les éléments LI ne peuvent pas avoir d'attributs value.

Pourtant ceci fonctionne :

Code:

<ul><li id="test" value="456" onclick="test("test")"></li>...

Ce que je cherche à savoir, c'est s'il est possible de récupérer cette valeur sans déclarer l'id... du genre :

Code:

<ul><li value="456" onclick="test(this)"></li>...
Code:

1 2 3 function test(elm) { alert(document.getElementById(elm).getAttribute('value')); }
Merci d'avance pour votre réponse...
29/04/2020, 07h58
Doksuri
Citation:

Envoyé par psychadelic

dans le langage HTML les éléments LI ne peuvent pas avoir d'attributs value.

faux !
developer.mozilla.org/fr/docs/Web/HTML/Element/li

Citation:

Attributs
Cet élément inclut les attributs universels.
value
Cette valeur entière indique la valeur ordinale en cours de l'élément de liste tel que défini par l'élément <ol>. La seule valeur autorisée pour cet attribut est un nombre, même si la liste est affichée avec des chiffres romains ou des lettres. Les éléments de la liste qui suivent celui-ci continueront la numérotation à partir de la valeur indiquée. L'attribut value n'a pas de signification pour les listes non ordonnées (<ul>) ou pour les menus (<menu>).

dans son cas, value n'a pas de signification pour sa liste, mais ca n'empeche qu'il peut tres bien s'en servir en JS

la seule erreur est sa function test()
Code:

1 2 3 function test(elm) { alert(elm.getAttribute('value')); }
29/04/2020, 08h14
dominos

Parfait ! :merci:
29/04/2020, 08h25
dominos
Juste une question subsidiaire... est-ce qu'il est possible de récupérer le value d'une balise <li> par l'id de la balise <ul> ? Un peu comme le fait un <select><option>... un truc du genre :
Code:

1 2 3 var ul = document.getElementById(id); alert(ul.firstElementChild.getAttribute('value'));
29/04/2020, 09h05
dominos

Dans l'exemple suivant, ça retourne bien le value, sauf qu'il faut renseigner à la main l'element... ce que je cherche c'est de ne pas renseigner le numéro d'élément (en rouge dans le code...) et récupérer le value cliqué :

Citation:

var ul = document.getElementById('popo');
alert(ul.getElementsByTagName('li')[2].getAttribute('value'));

il serait LARGEMENT préférable d'utiliser un attribut valable et conforme w3c …
Code:

1 2 3 4 <ul><li id="test" data-value="456" onclick="test("test")"></li>… var ul = document.getElementById(id); console.log(ul.firstElementChild.getAttribute('data-value'));

29/04/2020, 09h22
dominos

merci pour la réponse, en fait, je cherche à récupérer le value des <li> cliqué par l'id du <ul> du genre... :

Code:

alert(ul.getElementsByTagName('li')[e.target].getAttribute('value'));

mais ça ne fonctionne pas :roll: c'est e.target qui semble ne pas être considéré...
29/04/2020, 10h55
Invité
Bonjour,

SUIS le conseil de SpaceFrog, et utilise un attribut data-*.

Cela dit... on utilise dataset pour le récupérer :
Code:

1 2 3 4 <ul> <li data-valeur="123" onclick="test(this);">blabla 1</li> <li data-valeur="456" onclick="test(this);">blabla 2</li> </ul>
Code:

1 2 3 4 5 function test(elt) { var li_val = elt.dataset.valeur; console.log( li_val ); }
N.B. J'ai mis volontairement "valeur", pour éviter de confondre avec l'attribut "value".
29/04/2020, 11h14
dominos

ça me retourne "undefined"... ce que je cherche c'est à récupérer le numéro de l'élément cliqué dans une liste <ul id="maliste"><li></li>..., de 0 à n...

ça fonctionne si je met un id dans chaque balise <li> en plus de l'id <ul> mais ce qui m'intéresse, c'est de savoir si on peut faire la même chose sans id <li> juste par en passant l'id de <ul>

Code:

ul.getElementsByTagName('li')[elm.id].getAttribute('data-value'));

pour le voir fonctionner, il faut attribuer l'id <li> à partir de 0, 1, etc.

Comment récuperer ce numéro d'élement sans l'id du genre ?

Code:

ul.getElementsByTagName('li')[elm.????].getAttribute('data-value'));
29/04/2020, 11h18
Invité
- Montre un VRAI EXTRAIT du code HTML !
- De plus, il faut un évènement pour déclencher l'action : click ? sur quoi ?
Le code que j'ai donné précédemment fonctionne SANS id, avec une fonction test() !

Ce code fonctionne, mais ce que je cherche à savoir c'est s'il est possible de se passer des id déclarés dans les balises <li> tout en conservant l'id déclaré dans <ul>...

Code:

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

Code:

1
2
3
4
function test(elm) {
	  var ul = document.getElementById(maliste');
	 alert(ul.getElementsByTagName('li')[elm.id].getAttribute('data-value'));
}

1- Je t'ai donné la solution :

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>

Code:

1
2
3
4
5
function test(elt)
{
  var li_val = elt.dataset.value; // récupération du data-value
  console.log( li_val );
}

Fais un copier-coller !

2- En voici une variante, AVEC id et SANS fonction test() :

Code:

1
2
3
4
<ul id="maliste">
  <li data-valeur="123">blabla 1</li>
  <li data-valeur="456">blabla 2</li>
</ul>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
window.addEventListener("DOMContentLoaded", (event) => {
 
const maliste_lis = document.querySelectorAll('#maliste li');
maliste_lis.forEach(function(li){
  li.addEventListener('click',function(){
    var li_val = li.dataset.valeur;
 
    console.log( li_val );
  })
})
 
})

3- Allons-y pour une 3ème solution :

Code:

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

Code:

1
2
3
4
function test(li_val)
{
  console.log( li_val );
}

29/04/2020, 11h38
dominos

Ce que tu fais, revient à faire un elm.getAttribute('value')...

ce qui m'interresse c'est de passer par l'id <ul id="maliste">... !

Si tu as une solution, je suis dessus depuis ce matin :zoubi:
29/04/2020, 11h53
Invité

C'est la variante (2-) que j'ai proposée... :roll:

Je t'ai donné 3 solutions qui fonctionnent (et répondent, à priori, à ta problématique).
Je ne vois pas ce que je peux faire de plus.

Sinon, explique plus clairement, et dans son contexte, ce qui te pose problème.
29/04/2020, 14h30
dominos

merci, je crois que je vais rester avec mon id, la solution que tu proposes utilise une boucle, et j'ai aussi besoin d'une fonction...

well, ma doc n'est pas à jour, et bon, on peut utiliser l'attribut "value", mais sinon l'attribut data-XXX est bien sur mieux adapté et beaucoup moins ambiguë sur le plan sémantique. ;-)

En fait j'ai l'impression qu'il recherche le mécanisme de délégation d'évenement en JS

ça se code comme ça:

Code:

1
2
3
4
5
6
7
8
<ul id="ma-liste" class="dropdown-menu">
  <li data-value="123" >aaa</li>
  <li data-value="456" >bbb</li>
  <li                  >ccc</li>
  <li data-value="000" >ddd</li>
</ul>
 
<div id="message-box">...</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
const maListe = document.getElementById('ma-liste')
  ,   msgBox  = document.getElementById('message-box')
  ;
msgBox.display = msg =>    // pour remplacer la commande alert()
  {
  msgBox.textContent = msg
  setTimeout(()=>{ msgBox.textContent = '...' }, 2000);  // 2 secondes d'affichage c'est l'argement suffisant ?
  }
maListe.onclick = e =>   // récupere tout click effectué sur l'ensemble de la liste
  {
  if (!e.target.matches('li[data-value]')) return // on rejette tout ce qui ne correspond pas à cette condition
  msgBox.display ( e.target.dataset.value )
  }

29/04/2020, 14h35
dominos
Dans cette solution, l'index (partie en rouge) indique le premier <li>, 1= second, etc. :
Code:

1 2 3 4 function test(elm) { var ul = document.getElementById('maliste'); alert(ul.getElementsByTagName('li')[0].getAttribute('data-value')); }
Est-il possible de récupéré le numéro de l'élément cliqué au lieu de 0 ?
29/04/2020, 14h43
Invité

@psychadelic

Citation:

Envoyé par psychadelic

...et bon, on peut utiliser l'attribut "value"...

Sémantiquement, ce n'est pas la bonne méthode.

Balise <li> :

Citation:

Attributs

value
Cette valeur entière indique la valeur ordinale en cours de l'élément de liste tel que défini par l'élément <ol>.
La seule valeur autorisée pour cet attribut est un nombre, même si la liste est affichée avec des chiffres romains ou des lettres.
[...]

On n'est donc pas censé y mettre n'importe quoi.

@dominos
SERIEUX ????
Tu n'es pas capable de COPIER-COLLER les codes qu'on te propose pour les TESTER ???

On n'a PAS BESOIN de cet INDEX pour récupérer la valeur !!

Voir 40 message(s) de cette discussion en une page