Message d'erreur cannot read property 'box' of undefined"

Version imprimable

Bonjour, pouvez vous me dire pourquoi la console me dit "cannot read property 'box' of undefined" alors que je prefixe box par carousel qui est mon objet.
voici mon code:

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
var carousel = {
    box: document.querySelector('.carouselbox')
    , next: carousel.box.querySelector('.next')
    , prev: carousel.box.querySelector('.prev')
    , items: carousel.box.querySelectorAll('.content li')
    , counter: 0
    , amount: carousel.items.length
    , current: carousel.items[0]
    , active: carousel.box.classList.add('active')
    , navigate: function (direction) { 
        carousel.current.classList.remove('current');
        carousel.counter = carousel.counter + this.direction;
        if (this.direction === -1 && carousel.counter < 0) {
            carousel.counter = carousel.amount - 1;
        }
        if (direction === 1 && !carousel.items[carousel.counter]) {
            carousel.counter = 0;
        }
        carousel.current = carousel.items[carousel.counter];
        carousel.current.classList.add('current');
    }
    , click: function () {
        next.addEventListener('click', function (e) {
            carousel.navigate(1);
        });
        prev.addEventListener('click', function (e) {
            carousel.navigate(-1);
        });
        carousel.navigate(0);
    }
    , clavier: function () {
        document.addEventListener("keydown", function (e) {
            if (e.keyCode === 37) {
                carousel.navigate(-1);
            }
            else if (e.keyCode === 39) {
                carousel.navigate(1);
            }
        });
    },
};
carousel.navigate();
carousel.clavier();
carousel.click();

merci beaucoup.

08/01/2018, 16h05
SpaceFrog

A quel moment est il interprété ton bout de script ?
Tu tentes d'utiliser une propriété d'un élément qui n'a pas été trouvé sur la page => undefined .

Voila j'avance
ce code fonctionne:

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
47
var box = document.querySelector('.carouselbox');
   var next = box.querySelector('.next');
   var prev = box.querySelector('.prev');
   var items = box.querySelectorAll('.content li');
 
   var carousel = {
       counter: 0
       , amount: items.length
       , current: items[0]
       , navigate: function (direction) {
           carousel.current.classList.remove('current');
           carousel.counter = carousel.counter + direction;
           if (direction === -1 && carousel.counter < 0) {
               carousel.counter = carousel.amount - 1;
           }
           if (direction === 1 && !items[carousel.counter]) {
               carousel.counter = 0;
           }
           carousel.current = items[carousel.counter];
           carousel.current.classList.add('current');
       }
       , nexte: function () {
           next.addEventListener('click', function (e) {
               carousel.navigate(1);
           });
       }
       , preve: function () {
           prev.addEventListener('click', function (e) {
               carousel.navigate(-1);
           });
       }
       , clavier: function () {
           document.addEventListener("keydown", function (e) {
               if (e.keyCode === 37) {
                   carousel.navigate(-1);
               }
               else if (e.keyCode === 39) {
                   carousel.navigate(1);
               }
           });
       }
   , };
 
carousel.navigate(0);
   carousel.nexte();
   carousel.preve();
   carousel.clavier();