Discussion :

[dominos]

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 :

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

1
2
3
function test(elm) {
	alert(document.getElementById(elm).getAttribute('value'));
}

d'avance merci pour votre réponse...

[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.

[dominos]

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

Pourtant ceci fonctionne :

Code HTML :

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

<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 HTML :

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

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

Code :

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

1
2
3
function test(elm) {
	alert(document.getElementById(elm).getAttribute('value'));
}

Merci d'avance pour votre réponse...

[Doksuri]

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

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 javascript :

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

1
2
3
function test(elm) {
	alert(elm.getAttribute('value'));
}

[dominos]

Parfait !

[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 :

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

1
2
3
 
var ul = document.getElementById(id);
alert(ul.firstElementChild.getAttribute('value'));

[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é :

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

[SpaceFrog]

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

Code :

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

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'));

[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 :

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

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

mais ça ne fonctionne pas c'est e.target qui semble ne pas être considéré...

[Invité]

Bonjour,

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

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

Code HTML :

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

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 :

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

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".

[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 :

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

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 :

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

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

[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() !

[dominos]

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 HTML :

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

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 :

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

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

[Invité]

1- Je t'ai donné la solution :

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>

Code :

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

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 html :

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

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

Code JavaScript :

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

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 html :

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

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 JavaScript :

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

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

[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

[Invité]

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

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.

[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...

[psychadelic]

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 HTML :

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

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 JAVASCRIPT :

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

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

[dominos]

Dans cette solution, l'index (partie en rouge) indique le premier <li>, 1= second, etc. :

Code :

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

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 ?

[Invité]

@psychadelic

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

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

Balise <li> :

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