未捕获的TypeError：对象不是函数

Question

I am using require on a site I am working on, and while working on the checkout, I ran across and issue. I am trying to change a credit card image to show the card number the activated to be whatever the number they put in is.

However, everytime a key is pressed, I get this error:

Uncaught TypeError: object is not a function 

And it says it's coming from line 12 of my "controller", which is:

var chkCard = new CreditImage($(this).val(), '.icon-credit-cards');

Uncaught TypeError: object is not a function (repeated 3 times)

Here is my "presenter" aka assets/scripts/presenters/CreditImage.js

require(
    [
        'jquery'
    ],
    function ($) {
        "use strict";

        var CreditImage = function ($number, $el) {
            // Match and define
            var visa = $number.match(/^4[0-9]{12}(?:[0-9]{3})?$/);
            var mastercard = $number.match(/^5[1-5][0-9]{14}$/);
            var amex = $number.match(/^3[47][0-9]{13}$/);
            var discover = $number.match(/^6(?:011|5[0-9]{2})[0-9]{12}$/);
            var matched;

            // Create matched var
            if (visa) {
                matched = "visa";
            } else if (mastercard) {
                matched = "mastercard";
            } else if (amex) {
                matched = "amex";
            } else if (discover) {
                matched = "discover";
            }

            if (matched) {
                // Highlight the matched credit card
                $("."+$el+":not("+$el+"-" + matched + ")").addClass($el);
                $("."+$el).addClass($el+"-" + matched);
            } else {
                // No match, highlight them all
                $(".+$el).removeClass().addClass($el);
            }

            return matched;
        }
    }
);

And here is the "controller":

require(
    [
        'jquery',
        'assets/scripts/presenters/CreditImage'
    ],
    function ($, CreditImage) {
        'use strict';
        $(function () {         
            // Credit card validation
            $("#add-cc-card-number").bind("keyup", function () {

                var chkCard = new CreditImage($(this).val(), 'icon-credit-cards'));

            });

        });
    }
);

Answer 1

There are two problems I see, either one sufficient alone to prevent your code from working.

Scoping Problem #1

CreditImage() is private to the anonymous function it is declared within. Now, honestly I don't know much about requirejs, but there's no way such a locally-scoped function will be accessible from outside its parent function.

You need to examine examples of requirejs code to see how others have designed their functions to be callable between separate requirejs calls (or perhaps they use only one call somehow?). Or maybe finding some good tutorials or blog posts will do.

In any case, the way you have it now will not work.

Scoping Problem #2

Your second code block has CreditImage as a parameter. This means that inside the function, references to this name will always refer to the parameter and can never refer to any outer-scoped function or variable. Again, I am not familiar with requirejs, but are you sure that it is passing in the CreditImage function into the CreditImage parameter?

Using Chrome or using Firefox with Firebug installed, add console.log(CreditImage); into your lower function to see what is being passed in. In Windows at least, F12 brings up the debug tools. From there, find the console and run your code.

Answer 2

try insert document.domain ="yourDomain"; as parameter in the page