im getting an error: Uncaught TypeError: CheckList is not a constructor
and it says I have it in the main.js file…HELP!!! main.js file:
(function (window) {
// body...
var FORM_SELECTOR='[data-coffee-order="form"]';
var CHECKLIST_SELECTOR='[data-coffee-order="checkList"]';
//assigning namespaces to variables
var App=window.App;
var Truck=App.Truck;
var Datastore=App.Datastore;
var FormHandler=App.FormHandler;
var CheckList=App.CheckList;
var myTruck= new Truck( 'ncc-17',new Datastore());
//to intercact with protected instance of Truck write
// code below and export it to global namespace
/*
myTruck.printOrders();
truck.js:44 Truck # ncc-17 has pending orders:
*/
window.myTruck=myTruck;
// window.myCheckList=myCheckList;
var myForm = new FormHandler(FORM_SELECTOR);
// myForm.addSubmitHandler(myTruck.createOrder.bind(myTruck));
// want createorder from truck.js to be called on but cannot pass a reference to
// myForm.addSubmitHandler(); instead use bind reference above
// if we didnt do this the value of " this" in createorder
// is changed and not be truck instance therfore we have errors
// console.log(myForm);
var myCheckList= new CheckList(CHECKLIST_SELECTOR);
myForm.addSubmitHandler=(function(data){
// createorder is the fn(data) and same below it
myTruck.createOrder(data);
myCheckList.addRow(data);
});
})(window);
Hi @Naomi, try console.log(App) to see what properties are on it? I suspect App.CheckList is undefined, which means isn’t getting set (or might not be set early enough).
Also, when you see the exception, what line and file is it coming from? (screenshot would be ) If I remember correctly, there’s another “module” that depends on the CheckList module, so if CheckList isn’t defined early enough, you’ll see this same error.
html file is attached. the script file is included in the file. cant send
the CheckList. js file , it was blocked by my computer for security reasons
so here it is :
(function(window) {
// body...
'use strict';
var App=window.App || {};
// importing APP and jQuery namespace line above and below
var $=window.jQuery;
function CheckList(selector){
if(!selector){
throw new Error('no selector provided');
}
this.$element=$(selector);
if(this.$element.length===0){
throw new Error('not find element with selector '+ selector);
}
}
// the parameter, coffeorder is data passed that contains a
//single coffe order like strength size etc...
CheckList.prototype.addRow= function(coffeeOrder) {
// pg 234
var rowElement=new Row(coffeeOrder);
//add the new row instance $row property to the checklist instance
//this.$element with append() method
this.$element.append(rowElement.$row);
};
// want mark up to appear after form submits, create another
constructor!
//accepts coffeOrder which is same data form createorder from
Truck.js file
function Row(coffeeOrder){
// use jquery to build DOM elements, more on pgs 229-231
var $div=$('<div><div>',{
'data-coffee-order':'checkbox',
'class':'checkbox'
});
var $label=$('<label><label>');
var $checkbox=$('<input><input>',{
type:'checkbox',
value:coffeeOrder.emailAddress
});
var description=coffeeOrder.size + ' ';
if(coffeOrder.flavor){
description+=coffeOrder.flavor+ ' ';
}
description+=coffeeOrder.coffee+ ' , ';
description+='(' + coffeeOrder.emailAddress + ')';
description+= '[' + coffeeOrder.strength +' x ]';
// below append() adds jquery collection or DOM elements
// as child elements
$label.append(description);
$label.append($checkbox);
$div.append($label);
this.$row=$div;
}
// exporting checklist to app namespace below
App.CheckList=CheckList;
window.App=App;
})(window);
@Naomi ah, I don’t think you can attach files (other than images), so I don’t see index.html. Try copy-pasting your code into a post like you did for CheckList.js.
Hi @Naomi, could you attach a screenshot of your Chrome console when you open the page? I see a couple syntax errors in checklist.js due to line breaks in comments, but it’s hard to tell if that was just something that happened when you copy-pasted. Thanks!
@Naomi hmm, try putting a console.log statement at the bottom of checklist.js, right after the App.CheckList=CheckList; line — I want to confirm if it’s being executed.
If it is, the bug may be in datastore.js (maybe it’s clobbering window.App)
) If I remember correctly, there’s another “module” that depends on the CheckList module, so if CheckList isn’t defined early enough, you’ll see this same error.
