addEventListener dans une boucle

Version imprimable

bonjour,

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

Voici mon script:

Code:

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.

:salut:

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:

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>

03/04/2017, 17h50
Trocmuch

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
03/04/2017, 18h56
Beginner.

Citation:

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...
05/04/2017, 00h26
Trocmuch

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.
05/04/2017, 08h56
melka one

jour

quelle version
05/04/2017, 16h13
Trocmuch

Curieusement, je ne sais pas !

J'utilise un éditeur du nom de Editplus quelque peu confidentiel semble t'il.
Cet éditeur possède un navigateur intégré basé sur IE, mais je ne sais pas lequel.

Le problème que j'ai rencontré avec ce navigateur intégré ne se reproduit pas avec Edge.

Je n'ai pas d'autre version d'IE installée.
05/04/2017, 18h35
melka one

ca pourrait donc bien être la version utilisé il faudrait essayer avec ie 11 (sur windows 10 clic droit ouvrir avec)

getElementsByClassName et addEventListener fonctionne a partir de ie 9 pareille pour querySelectorAll voir une version supérieur