Вход

Просмотр полной версии : не видится this.переменная при вызове обработчика

OlegALL
18.06.2014, 10:56
Привет.

Такая проблема.

this.width, инициализированный вызовом конструктора, при непосредственном вызове функции showNextPicture равен 130 - как надо, а если вызвать эту функцию через onclick - то undefuned. Почему?


код:

function Carousel(width, count){
this.width = width;
this.count = count;
}

Carousel.prototype.init = function(){
// код
}


Carousel.prototype.showNextPicture = function(){
console.log(this.width); // 130 - если вызвать прямо, undefined - если по щелчку мыши
}

var carousel = new Carousel(130, 5);
carousel.init();
//carousel.showNextPicture();

// Обработчики событий
document.getElementById('next').addEventListener("click", carousel.showNextPicture, false);
document.getElementById('prev').addEventListener("click", carousel.showPreviousPicture, false);
рони
18.06.2014, 11:15
OlegALL,
а если так
document.getElementById('next').addEventListener("click", function(){
carousel.showNextPicture()
} , false);
Aetae
18.06.2014, 11:21
Потому что this в обработчике события ссылается на элемент на котором оно висит.
OlegALL
18.06.2014, 15:01
рони, не помогло, симптом тот же
OlegALL
18.06.2014, 15:03
Потому что this в обработчике события ссылается на элемент на котором оно висит.
Я не понял, можно разъяснить? И как сделать как мне надо?
рони
18.06.2014, 15:17
рони, не помогло, симптом тот же
:-?
<!DOCTYPE HTML>

<html>

<head>
<title>Untitled</title>
</head>

<body> <p id='next'>жмак сюды</p>
<script>
function Carousel(width, count){
this.width = width;
this.count = count;


}

Carousel.prototype.init = function(){
// код
}


Carousel.prototype.showNextPicture = function(){
alert(this.width); // 130 - если вызвать прямо, undefined - если по щелчку мыши
}

var carousel = new Carousel(130, 5);
carousel.init();
//carousel.showNextPicture();

// Обработчики событий
document.getElementById('next').addEventListener("click", function(){
carousel.showNextPicture()
} , false);
//document.getElementById('prev').addEventListener("click", carousel.showPreviousPicture, false);

</script>
</body>

</html>
OlegALL
18.06.2014, 21:20
:-?
<!DOCTYPE HTML>

<html>

<head>
<title>Untitled</title>
</head>

<body> <p id='next'>жмак сюды</p>
<script>
function Carousel(width, count){
this.width = width;
this.count = count;


}

Carousel.prototype.init = function(){
// код
}


Carousel.prototype.showNextPicture = function(){
alert(this.width); // 130 - если вызвать прямо, undefined - если по щелчку мыши
}

var carousel = new Carousel(130, 5);
carousel.init();
//carousel.showNextPicture();

// Обработчики событий
document.getElementById('next').addEventListener("click", function(){
carousel.showNextPicture()
} , false);
//document.getElementById('prev').addEventListener("click", carousel.showPreviousPicture, false);

</script>
</body>

</html>

Спасибо! Ваша строка работала, сорри, что-то не углядел