We Keep Coding

using this on an objects method is returning an error

I feel my whole understanding of this has been thrown up in the air.
I have a Quiz object which holds the necessary variables and methods required to play the quiz.
I am trying to reference a method of Quiz from another method in Quiz (getQuestion in skipQuestion()) however, I am seeing a message in the console saying that this.getQuestion is not defined. I was under the impression that this in this case refers to the object it is in, hence the function in question should be referred to as this.getQuestion().
The error message I am getting is script.js:18 Uncaught TypeError: this.getQuestion is not a function
Can anyone explain what is going wrong here?
In my init function it seems that this refers to the Quiz object, but in skip question it seems to change. Is this down to query having a different definition of this? where do you draw the line, and when is the context of this changed?
(function(window){
$(document).ready(function(){
var Quiz = {
score : 0,
question: '',
answer: '',
init: function() {
this.getQuestion();
this.checkAnswer();
this.skipQuestion();
},
skipQuestion: function() {
$('#skip').click(function(){
this.getQuestion();
})
},
getQuestion: function() {
$.get('http://jservice.io/api/random', function(data){
$('#question').html(data[0].question);
this.answer = data[0].answer.toLowerCase();
});
},
checkAnswer: function() {
if($('#answer').val() === this.answer) {
this.score += 1;
}
}
}
Quiz.init();
});
})(window);

Because you are nesting inside another function, the this context changes to that function, so the methods you look for are no longer available. You can try to solve it by either storing the this inside a variable that will be within the scope of the function you are defining, or by using Double Arrow Functions, which have no associated this context themselves (and therefor also don't support bind or call). Here are your options:
Declare a variable:
skipQuestion: function() {
var that = this;
$('#skip').click(function(){
that.getQuestion();
})
}
or a Double Arrow Function:
skipQuestion: function() {
var that = this;
$('#skip').click(() => that.getQuestion())
}
Your init function is considered a method of your Quiz object, while the anonymous function passed to the click event is not a method of your Quiz, it is a method of an anonymous object created in the background, and shares no methods or variables with your Quiz. This is important to consider!

The thing is you are using this inside the click event and it refers to the event rather than you context. To work around you need to assign this to another variable and then use that;
skipQuestion: function() {
var self = this;
$('#skip').click(function(){
self.getQuestion();
})
},
$.get and .click event create their own context and thus this refers to their context instead of the context of quiz.
JS
(function(window){
$(document).ready(function(){
var Quiz = {
score : 0,
question: '',
answer: '',
init: function() {
this.getQuestion();
this.checkAnswer();
this.skipQuestion();
},
skipQuestion: function() {
var self = this;
$('#skip').click(function(){
that.getQuestion();
})
},
getQuestion: function() {
var self = this;
$.get('http://jservice.io/api/random', function(data){
$('#question').html(data[0].question);
self.answer = data[0].answer.toLowerCase();
});
},
checkAnswer: function() {
if($('#answer').val() === this.answer) {
this.score += 1;
}
}
}
Quiz.init();
});
})(window);

Calling object method within the object—error: cannot read property of undefined

I'm trying to call getQuestions() inside the same object it is a method of. But when I try to read the quizz.config.allQuestions property, I get an error message reading "Uncaught TypeError: Cannot read property 'getQuestions' of undefined." Is there something I am missing here?
var quizz = {
config: {
urlJSON: 'questions.json',
allQuestions: quizz.getQuestions()
},
getQuestions: function() {
$.getJSON(quizz.config.urlJSON, function(questions) {
return questions;
});
}
};

When you're trying to assign to allQuestions the quizz object isn't done being initialized yet. So you'd have to do it after creating the object.
var quizz = {
config: {
urlJSON: 'questions.json'
// don't declare allQuestions
},
getQuestions: ...
};
quizz.allQuestions = quizz.getQuestions();
The problem with that though is that $.getJSON is an asynchronous function, meaning it won't return that value immediately. That's why it has a callback in it. Instead, you might try defining getQuestions like this:
getQuestions: function(callback) {
$.getJSON(quizz.config.urlJSON, callback);
}
Then you can get the values like this:
quizz.getQuestions(function(questions) {
quizz.config.allQuestions = questions;
});

JavaScript: TypeError: xyz is not a function when calling the function

I am trying to come up with a page on which, when user clicks a file button on the page, I try to execute the JS on the page. And I am trying to use OOP / class so hopefully it can be reused later. Here is my test code:
// This is the "class".
function BearUpload() {
// some values will go here...
}
// Add a few functions
BearUpload.prototype.function1 = function () {
console.log("function1 called");
}
BearUpload.prototype.handleFileSelect = function (evt) {
console.log("handleFileSelect called");
this.function1();
}
var myBear = new BearUpload(); // Create a global variable for the test
$(document).ready(function () {
var some_condition_goes_here = true;
if (some_condition_goes_here) {
$("#my-file-select-button").change(myBear.handleFileSelect);
}
});
However, it gets error like:
TypeError: this.function1 is not a function
this.function1();
Any idea about this?
Thanks!

Bind myBear to your change eventListener
In general when you access this from handleFileSelect, this refers to the html element.
i.e. this = <input type="file" id="my-file-select-button">
$("#my-file-select-button").change(myBear.handleFileSelect.bind(myBear));
The bind() method creates a new function that, when called, has its
this keyword set to the provided value, with a given sequence of
arguments preceding any provided when the new function is called.
MDN doc

You are trying to call function1 on DOM object but you have to call on jQuery object
$(this).function1();

That's because when bound as a handler to jQuery events, this would refer to the element on which the event is triggered.
I would rather change your code like this
// Create only one global variable for your app
var APP = {};
// Create class using immediate function/closure
APP.BearUpload = (function(){
//declare private variables here
// Constructor
var bearUpload = function() {
// some values will go here...
}
// Add a few functions
bearUpload.prototype.function1 = function () {
console.log("function1 called");
}
bearUpload.prototype.handleFileSelect = function (evt) {
console.log("handleFileSelect called");
this.function1();
}
return bearUpload;
}());
APP.myBear = new APP.BearUpload();
$(document).ready(function () {
var some_condition_goes_here = true;
if (some_condition_goes_here) {
$("#my-file-select-button").change(function(e){
// do something with event 'e'
APP.myBear.handleFileSelect.call(APP.myBear, e);
});
}
});

do not use "this", it is confusing some time.
BearUpload.prototype ={
function1:function(){
var self = this;
...
},
handleFileSelect:function(e){
var self = this;
...
}
}

Reactive variable is undefined when it is defined

I would like to get some help debugging a situation where a Reactive Variable is undefined, when it has been defined already.
This code is attaching a Reactive Variable to the template instance, and using the variable in template.autorun().
Template.home.onCreated(function () {
this.limit = new ReactiveVar(15);
this.autorun(function () {
this.subscribe('recent-topics', this.limit.get());
});
});
When I load the template for the first time, I expect the template to subscribe to recent-topics with an argument 15. However, the code throws an error:
Uncaught TypeError: Cannot read property 'get' of undefined
Any ideas why?

Just an answer for the sake of spreading the joys of ES6:
Template.home.onCreated(function () {
this.limit = new ReactiveVar(15);
this.autorun(() => {
this.subscribe('recent-topics', this.limit.get());
});
});
Make sure you add the grigio:babel package, and your Javascript file ends in .es6.js, .es6, or .jsx.
Explanation
In ES6 (aka ECMAScript 6), there's a new "fat arrow" syntax which is very similar to CoffeeScript's implementation. In ES6, when you do something like this:
someFunc = function () {
anotherThing((var1, var2) => {
this.thing = true;
});
};
It's the same as doing this:
someFunc = function () {
var self = this;
anotherThing(function (var1, var2) {
self.thing = true;
});
};

This is a scoping issue.
Inside of your Tracker.autorun, this no longer refers to the template, but the autorun's callback function. Inside of the autorun, try calling Template.instance().limit.get().

Better than using Template.instance().limit.get() (ryan's answer)
You should do something like this:
Template.home.onCreated(function () {
var self = this;
self.limit = new ReactiveVar(15);
self.autorun(function () {
self.subscribe('recent-topics', self.limit.get());
});
});

Illegal invocation Error

I only have one function in my scripts page, and it is giving me this error: Uncaught TypeError: Illegal invocation. To be honest, I've never seen this error before, and none of the other cases that I found online seemed to apply to me. My jquery is below, and I don't think any other pieces are necessary, but let me know and I can post other parts.
$(document).ready(function () {
/*----UPDATE BOX REQUEST----*/
$(".boxesChange").live("click", function () {
entry = $(this).closest("tr");
delivered = $(entry).find("#delivered");
if ((delivered).is(":checked")) {
deliveredBoolean = "1";
} else {
deliveredBoolean = "0";
}
boxesDelivered = $(entry).find("#boxesDelivered").val();
bubbleWrapDelivered = $(entry).find("#bubbleWrapDelivered").val();
supplyRequestId = $(entry).find(".boxesSupplyRequestId").val();
$.post('boxesChange.php', {
'delivered': delivered,
'boxesDelivered': boxesDelivered,
'bubbleWrapDelivered': bubbleWrapDelivered,
'supplyRequestId': supplyRequestId
}, function (response) {
$(this).closest(".boxesScheduleEntry").css("background-color", "#ccffcc");
});
return false;
});
});

The problem is in your $.post call. You're trying to set 'delivered' to delivered, which is a jQuery object, I assume you meant deliveredBoolean.
Also, in the callback function this is not what you think it is, it's the jqXHR object, not the element.
var $this = $(this);
$.post(
'boxesChange.php',
{
'delivered': deliveredBoolean,
'boxesDelivered': boxesDelivered,
'bubbleWrapDelivered': bubbleWrapDelivered,
'supplyRequestId': supplyRequestId
},
function (response) {
$this.closest(".boxesScheduleEntry").css("background-color", "#ccffcc");
}
);

I assume the error is inside of this part:
function (response) {
$(this).closest(".boxesScheduleEntry").css("background-color", "#ccffcc");
}
Here I think you want this to be the same as above when you are using closest to get the "tr" element. But in here this is the context of the $.post imho.
You either need to bind or rather do var boxChange = $(this), at the top of the event handler function and use the cached reference afterwards