I cannot seem to figure out why I cannot reference a function that has been defined in another javascript file.
In this specific case, I cannot reference the this.view property which is passed into the TaskCtrlr and utilized in the addTask() function.
Stacktrace:
Uncaught TypeError: Cannot read property 'addTodoTask' of undefined
at HTMLAnchorElement.addTask (TaskCtrlr.js:21)
addTask @ TaskCtrlr.js:21
app.js
$(function () {
let model = new TaskModel();
let view = new TaskView(model);
let controller = new TaskCtrlr(model, view);
});
TaskCtrlr.js
//Controller
let TaskCtrlr = function (model, view) {
this.model = model;
this.view = view;
this.init();
};
TaskCtrlr.prototype = {
init: function () {
this.setupEventHandlers();
},
setupEventHandlers: function () {
//TODO: Define Event Handlers
document.getElementById('addTask').addEventListener('click', this.addTask);
document.getElementById('todoRemove').addEventListener('click', this.removeTask);
document.getElementById('todoComplete').addEventListener('click', this.completeTask);
document.getElementById('doneRemove').addEventListener('click', this.removeTask);
},
addTask: function () {
this.view.addTodoTask();
this.view.getDOMStrings();
},
removeTask: function () {
console.log('Did this do something? 2');
//1. Do something w/ view
//2. Do something w/ model
},
completeTask: function () {
console.log('Did this do something? 3');
//1. Do something w/ view
//2. Do something w/ model
}
};
TaskView.js
let TaskView = function (model) {
this.model = model;
};
let DOMStrings = {
wow: 'WOWO'
};
TaskView.prototype = {
updateTodoCount: function () {
console.log('WOOTYFREAKINGWOO');
},
updateDoneCount: function () {
},
addTodoTask: function () {
console.log('hellllooo');
//this.updateTodoCount();
},
completeTask: function () {
},
deleteTask: function () {
},
getDOMStrings: function () {
return DOMStrings;
}
};
