Discussion :

[Shadowsoul]

Bonjour, comment Récupérer l’indice d’un élément d’un tableau juste en cliquant dessus.

Code html :

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
<h1>test</h1>
  <div id="test">
    <ul id="list">
      <li id="l1"> 
       <a href='#' id='un'> un</a> 
      </li>
      <li id="l2"> 
       <a href='#' id='deux'>Deux</a>
      </li>
      <li id="l3"> 
       <a href='#' id='trois'>trois
       </a>
      </li>
    </ul>
  </div>
 
  <script src="script.js"></script>

Ici, je veux modifier mon titre «*test*» par l’option qui sera cliqué dans la liste. Je peux créer trois évènements similaires en modifiant le sélecteur. Mais je me suis dis que je pouvais éviter la redondance en créant une variable au niveau du sélecteur... sauf que en utilisant «*getElementsByTagName*» j’ai un tableau donc il me faut l’indice.

Je sais pas si mon problème est assez bien expliqué...

Si la réponse est trop évidente, ne m’en voulez pas 🙏🏾 Je suis élève.

[-Nikopol-]

tu n'as pas besoin de la valeur de l'index meme si tu peux l'avoir aisement dans un forEach. Tu peux recupérer tes "li" via un querySelectorAll (bien mieux que by tag namenotamment si tu as d'autres li sur ta page. Tu obtiens donc une HTMLcollection liElmts par exemple que tu peux boucler avec un forEach. Sur chaque élément tu pourras ainsi ajouter un addEventlistener qui modifiera le titre de ta page.

[Shadowsoul]

J’ai essayé ceci...

Code :

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

1
2
3
4
5
6
a=document.querySelector('#list').querySelectorAll('a');
 
a.forEach(function (a){
 addEventListener('click',test);
 function test(){
  document.querySelector('h1').innerHTML='<b>' + a + '</b>';}});

Le résultat que j’ai est le chemin d’accès à la variable non son contenu

[-Nikopol-]

Tu n'etais pas loin, quelques remarques : querySelector et querySelectorAll s'utilisent avec n'importe quel selecteur css, donc pas besoin de les chainer.
let a=document.querySelector('#list a'); (ne pas oublier le "let".)
L'usage veux qu'on mette le nom du tableau au pluriel (plusieurs éléments) et chaque élément du forEach au singulier : aElmts.forEach(function(aElmt){...}Le addEventListener doit s'appliquer à un élément, c'est ca l'erreur commise ici. Tu peux soit déclarer les instructions dedans ou alors dans une fonction comme tu l'as fait mais il est preférable de mettre cette fonction hors du forEach.
document.querySelector('h1').innerHTML='<b>' + a + '</b>';} là tu affiches l'élément a, il faudra utiliser textContent par exemple pour récupérer le texte. Et pour finir innerHTML est à eviter, lui préférer insertAdjacentHTML.

Code :

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

1
2
3
4
5
6
7
8
9
10
 
        let title = document.querySelector('#title-page');
        let liEltmts = document.querySelectorAll('ul#list li');
        liEltmts.forEach((li,idx,array)=>{
            console.log(idx)
            console.log(array)
            li.addEventListener('click',()=>{
                title.textContent = li.textContent
            })
        })

J'ai mis l'index que tu voulais au départ et l'array en console.log, ca peut servir un jour