Javascript error CheckList is not a constructor

#1

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);
#2

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 :100: ) 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.

#3

error coming from line:
var myCheckList= new CheckList(CHECKLIST_SELECTOR);

#4

@Naomi Could you include a screenshot of running console.log(App) in the dev tools?

#5

here is the snapshot

#6

Thanks @Naomi, looks like CheckList is not being defined and added to App. Most likely that could mean:

  • Your <script> tag for CheckList has a typo, or isn’t in the right order in index.html. Would you post your index.html code here?
  • There’s a bug in checklist.js. Would you also attach that source code?
#7

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);
#8

@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.

#9

index.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css
">
</head>
<body class="container">
    <header>
        <h1>CoffeeRun</h1>
    </header>
    <section>
        <div class="panel panel-default">
            <div class="panel-body">
                <form data-coffee-order="form">
                            <!-- name attirbute is the key and what user
types in
                    will be the value -->
                    <div class="form-group">
                        <label for="coffeeOrder">Coffee Order</label>
                        <input id="coffeeOrder" class="form-control"
name="coffee" autofocus="">
                    </div>
                    <div class="form-group">
                        <label for="emailInput">email Address</label>
                        <input id="emailInput" class="form-control"
name="emailAddress" placeholder="dchh@123.com">
                    </div>
                        <!-- mark up for radio buttons -->
                    <div class="radio">
                        <label>
                            <input type="radio" name="size" value="short">
                            Short
                        </label>

                    </div>
                    <div class="radio">
                        <label>
                            <input type="radio" name="size"  value= "Tall"
checked="">
                            Tall
                        </label>

                    </div>
                    <div class="radio">
                        <label>
                            <input type="radio" name="size" value="grande">
                            Grande
                        </label>

                    </div>
                    <div class="form-group">
                        <label for="flavorShot">Flavor Shot</label>
                        <select id="flavorShot" class="form-control"
name="flavor">
                            <option value="">None</option>
                            <option value="caramel">Caramel</option>
                            <option value="almond">Almond</option>
                            <option value="mocha">Mocha</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="strengthLevel"> Caffeine Rating</label>
                            <!-- defualt value of 30. -->
                        <input id="strengthLevel" name="strength"
value="30" type="range">
                    </div>

            <button type="submit" class="btn btn-success">Sumbit</button>
            <button type="submit" class="btn btn-default">Reset</button>







                </form>
            </div>
        </div>
        <div class=" panel panel default">
            <div class="panel-body">
                <h4>Pending Orders : </h4>
                <div data-coffee-order="checkbox" ></div>
            </div>
        </div>
    </section>


 <script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"
charset="utf-8"></script>
 <script type="text/javascript" src="scripts/CheckList.js"
charset="utf-8"></script>
<script type="text/javascript" src="scripts/datastore.js"
charset="utf-8"></script>
<script type="text/javascript" src="scripts/truck.js"
charset="utf-8"></script>

<script type="text/javascript" src="scripts/formhandler.js"
charset="utf-8"></script>
<script type="text/javascript" src="scripts/main.js"
charset="utf-8"></script>

</body>
</html>
#10

I appreciate your efforts to help.

#11

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!

#12

here it is

#13

@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)

#14

oh it did work in console! Apparently in my main.js file I wrote,
var checkList=App.CheckList;
instead of
var CheckList=App.CheckList;

wow. thanks! Your assistance made me pay close attention to my code!

#15

are you on linkedin?

#16

@Naomi Hurray, onward!

Yep — I am @nybblr pretty much everywhere, including LinkedIn :slight_smile: