Hello everyone, my professsor is using your book for our class and we have been given the assignment to use the code in coffeerun to create a form to order creatures instead of coffee for one of our projects. I’m a big Harry Potter fan so I went with something based off that. The only things I changed is the names of things. For example, I changed myTruck to myWizardingWorld. Anyways I started over in each chapter in coffeerun to recreate this project and now I get an error in chapter 10 towards the end. Its where you update main.js on pg 220. I get an error saying: “Uncaught TypeError: Cannot read property ‘bind’ of undefined” Here is a screenshot of my console:
Here is my main.js:
(function (window) {
‘use strict’;
var App = window.App;
var FORM_SELECTOR = ‘[data-creature-order=“form”]’;
var WizardingWorld = App.WizardingWorld;
var DataStore = App.DataStore;
var FormHandler = App.FormHandler;
var myWizardingWorld = new WizardingWorld(‘ncc-1701’, new DataStore());
window.myWizardingWorld = myWizardingWorld;
var formHandler = new FormHandler(FORM_SELECTOR);
formHandler.addSubmitHandler(myWizardingWorld.creatureOrder.bind(myWizardingWorld));
console.log(formHandler);
})(window);
And here is my formhandler.js:
(function (window) {
‘use strict’;
var App = window.App || {};
var $ = window.jQuery;
function FormHandler(selector) {
if (!selector) {
throw new Error(‘No selector provided’);
}
this.$formElement = $(selector);
if (this.$formElement.length === 0) {
throw new Error('Could not find element with selector: ' + selector);
}
}
FormHandler.prototype.addSubmitHandler = function (fn) {
console.log(‘Setting submit handler for form’);
this.$formElement.on(‘submit’, function (event) {
event.preventDefault();
var data = {};
$(this).serializeArray().forEach(function (item) {
data[item.name] = item.value;
console.log(item.name + ' is ' + item.value);
});
console.log(data);
fn(data);
this.reset();
this.elements[0].focus();
});
};
App.FormHandler = FormHandler;
window.App = App;
})(window);