Message d'erreur cannot read property 'box' of undefined"
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:
merci beaucoup.
voici mon code:
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.
1 réponse
-
Bonjour,
Le problème c'est que tu définis un objet en faisant appel à lui-même.
Cela n'a pas de sens.
Tu devrais d'abord définir box, puis carousel :var box = document.querySelector('.carouselbox'); var carousel = { box: box , next: box.querySelector('.next') , prev: box.querySelector('.prev') ...
Xavier-
-
voila j'avance ,ce code marche:
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();
-
