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

**Trocmuch** · 05/04/2017, 16h13

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.

**melka one** · 05/04/2017, 18h35

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

addEventListener dans une boucle

JavaScript

Discussions similaires

Partager

Partager