addEventListener dans une boucle

**Trocmuch** · 31/03/2017, 13h01

bonjour,

je tourne en rond sur le problème suivant et une aide me serait bien utile.
Merci d'avance.

Voici mon script:

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
18
19
20
21
22
23
24
25
26
27
28
 <title>Document</title>
  <style type="text/css">
        
.lettre {
                        display:none;
                }
                </style>
 </head>
 <body>
  <p class='chiffre'>1</p>
  <p class ='lettre'>un</p>
  <p class='chiffre'>2</p>
  <p class ='lettre'>deux</p>
 
 
<script type="text/javascript">
 
window.onload=function()
{
        var chiffre=document.getElementsByClassName('chiffre');
        var lettre=document.getElementsByClassName('lettre');
 
        for(var i=0;i<chiffre.length;i++)
                        {chiffre[i].addEventListener('click',function(){lettre[i].style.display='block';});
                        }
}
</script>
 </body>

Mon objectif est d’obtenir qu'au clic sur le chiffe affiché on obtienne l'affichage du nombre correspondant caché à l'ouverture.
Malheureusement, ma boucle ne fonctionne pas. J'obtiens l'erreur 'Impossible d'obtenir la propriété 'style' d'une référence null ou non définie.'

Merci de votre aide.
Cordialement.

**danielhagnoul** · 31/03/2017, 15h30

getElementsByClassName : https://developer.mozilla.org/fr/doc...ntsByClassName
querySelectorAll : https://developer.mozilla.org/fr/doc...erySelectorAll

Ils renvoient une nodeList pas un véritable array, c'est pourquoi j'utilise Array.from() pour manipuler la nodeList comme un array.

Array.from() : https://developer.mozilla.org/fr/doc...aux/Array/from

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <style>
    .lettre     {
      display: none;
    }    
  </style>
  <script>
    'use strict';
    
    document.addEventListener( 'DOMContentLoaded', ev => {
      
    }, false );
    
    window.addEventListener( 'load', ev => {
      
      const
        chiffres = document.querySelectorAll( ".chiffre" ),
        lettres = document.querySelectorAll( ".lettre" );
 
        for ( let [ i, chiffre ] of Array.from( chiffres ).entries() ){
          chiffre.addEventListener( "click", () => {
            lettres[ i ].style.display = "block";
          }, false );
        }
        
    }, false );
  </script>
</head>
<body>
  <main>
 
    <p class="chiffre">1</p>
    <p class="lettre">un</p>
    <p class="chiffre">2</p>
    <p class="lettre">deux</p>
 
  </main>
</body>
</html>

**Trocmuch** · 03/04/2017, 17h50

merci de votre réponse.

Toutefois, je n'ai pas pu la tester. Il semble qu'il y ait une erreur de syntaxe à la ligne 17 que je ne sais pas corriger.
En effet, vous utilisez une syntaxe qui ne m'est pas familière.

Cordialement

**Beginner.** · 03/04/2017, 18h56

Envoyé par Trocmuch

Toutefois, je n'ai pas pu la tester. Il semble qu'il y ait une erreur de syntaxe à la ligne 17 que je ne sais pas corriger.

J'ai testé et chez moi cela fonctionne, tu peux aussi tester ici : http://jsbin.com/qurubecuka/edit?html,output

Sinon ton code fonctionne aussi si (dans la boucle for) tu remplaces var i = 0; par let i=0;, j'ai fait le test ici : http://jsbin.com/bixuwapebu/edit?html,output

J'ai deviné ça avec les réponses de DanielHagnoul mais je ne peux pas expliquer car je ne maitrise pas du tout...

**Trocmuch** · 05/04/2017, 00h26

Merci à tous les deux.

Je dois préciser que l'affichage 'erreur de syntaxe' était en fait le fait du seul internet explorer .
Avec les autres navigateurs tout fonctionne correctement.

**melka one** · 05/04/2017, 08h56

jour

quelle version

addEventListener dans une boucle

JavaScript

Vue hybride

Discussions similaires

Partager

Partager