Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   не видится this.переменная при вызове обработчика (https://javascript.ru/forum/dom-window/48060-ne-viditsya-peremennaya-pri-vyzove-obrabotchika.html)

OlegALL 18.06.2014 10:56
не видится this.переменная при вызове обработчика
 
Привет.

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

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
Цитата:
Сообщение от Aetae (Сообщение 317055)
Потому что this в обработчике события ссылается на элемент на котором оно висит.
Я не понял, можно разъяснить? И как сделать как мне надо?

рони 18.06.2014 15:17
Цитата:
Сообщение от OlegALL
рони, не помогло, симптом тот же
:-? 
<!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
Цитата:
Сообщение от рони (Сообщение 317105)
:-? 
<!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>
Спасибо! Ваша строка работала, сорри, что-то не углядел


Часовой пояс GMT +3, время: 09:17.