CODEWITHSUNDEEP
javascript
Meekaa Saangoo
Meekaa Saangoo

Reputation: 349

How do I fix the 'is not a function' error on a function prototype?

In the following code I get an error: TypeError: i.Print is not a function when the button is clicked. What is the cause of this error, and how do I fix it? Using Firefox debugger when I look at the value of i in the button's click handler, I see that i.prototype.Print has value Outer/Inner.prototype.Print().

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
        </head>
        <body>
            <p id="prn">Value here</p>
            <button id='btn'>Print</button>

            <script src="https://code.jquery.com/jquery-1.12.4.min.js">
            </script>
            
            <script>
                function TestObject(i)
                {
                    $("#btn").on("click", function() {
                        i.Print();
                        i.Change(Math.random() * 10 + 5);
                    });
                }

                function TestPrototype()
                {
                    var o = function Outer() {
                        function Inner(v)
                        {
                            var iv = v;

                            function print()
                            {
                                $("#prn").text(iv);
                            }
                        };

                        Inner.prototype.Print = function() {
                            print();
                            console.log(iv);
                        };

                        Inner.prototype.Change = function(nv) {
                            iv = nv;
                        };

                        return {
                            getInner : function(v) {
                                var i = Inner;
                                i(v);
                                return i;
                            }
                        };
                    }();

                    var i1 = o.getInner(10);

                    TestObject(i1);
                }

                ;(function() {
                    TestPrototype();
                }());
            </script>

        </body>
    </html>

Upvotes: 0

Views: 430

Answers (1)

Rajika Imal
Rajika Imal

Reputation: 655

You need to create an object using the constructor,

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
        </head>
        <body>
            <p id="prn">Value here</p>
            <button id='btn'>Print</button>

            <script src="https://code.jquery.com/jquery-1.12.4.min.js">
            </script>
            
            <script>
                function TestObject(i)
                {
                    $("#btn").on("click", function() {
                        i.Print();
                        i.Change(Math.random() * 10 + 5);
                    });
                }

                function TestPrototype()
                {
                    var o = function Outer() {
                        function Inner(v)
                        {
                            // instatiate member variables
                            this.iv = v;
                            this.print = print;
                            
                            function print()
                            {
                                $("#prn").text(this.iv);
                            }
                        };

                        Inner.prototype.Print = function() {
                            // access member variable
                            console.log(this.iv);
                            this.print();
                            print();
                        };

                        Inner.prototype.Change = function(nv){
                            iv = nv;
                        };

                        return {
                            getInner : function(v) {
                                var i = Inner;
                                return new i(v);
                            }
                        };
                    }();

                    var i1 = o.getInner(10);

                    TestObject(i1);
                }

                ;(function() {
                    TestPrototype();
                }());
            </script>

        </body>
    </html>

Upvotes: 2

Related Questions