Uncaught TypeError: Cannot read property 'push' of undefined

Question

i can push an item to prices array when invoked in console but not when i click the button..

<input type="text" id = "currentPrice">
<button type="button" id = "calcButton">Show</button>

var Newchart = function () {
    this.prices = []
}
Newchart.prototype.addNewprice = function () {
    var priceValue = +(document.getElementById('currentPrice').value);
    this.prices.push(priceValue);
    console.log('hello')
}
var c = new Newchart();
var el = document.getElementById("calcButton");
el.addEventListener("click", c.addNewprice, false);

score 1 · Answer 1 · answered Jun 30 '14 at 14:48

1

That's because the context is window in the callback's call, not your Newchart instance.

A solution is to use bind :

el.addEventListener("click", c.addNewprice.bind(c), false);

The MDN has a documentation regarding this problem : The value of this within the handler.

answered Jun 30 '14 at 14:48

Denys Séguret

372,613
87
782
758

I'm sure it's a duplicate. If somebody finds a good QA, I'll close. – Denys Séguret Jun 30 '14 at 14:50
Maybe https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-context-inside-a-callback – Felix Kling Jun 30 '14 at 15:11
@FelixKling It's a little too general but it will do. Closed. I let my answer which is focused on the problem. – Denys Séguret Jun 30 '14 at 15:14

Harpreet Singh · Answer 2 · 2014-06-30T15:01:12.457

0

issue of this variable

el.addEventListener("click", c.addNewprice, false);

Edit - suggested by @dystroy

In your case this points to the window not the class or the function.

edited Jun 30 '14 at 15:01

answered Jun 30 '14 at 14:55

Harpreet Singh

2,651
21
31

No `this` isn't the `event`. – Denys Séguret Jun 30 '14 at 14:55
@dystroy, OK then please let me know, what exactly addEventListner is called? – Harpreet Singh Jun 30 '14 at 14:57
Simply read my answer – Denys Séguret Jun 30 '14 at 14:57

Uncaught TypeError: Cannot read property 'push' of undefined

2 Answers2