CODEWITHSUNDEEP
javascripthtmltelerik
user3164083
user3164083

Reputation: 1073

uncaught type error: undefined is not a function

Im making a simple form with Telerik Appbuilder HTML5 + javascript that takes a users input and logs it to the console when they click the submit button.

ClientClass.js:

function Client() {
    this.username = "username",
    this.password = "Password",
    this.printUsername = function() {
        this.username=$("#Username").val()
        console.log(this.username);
    };
};

Home.html: 

<div data-role="view" data-title="Login" data-layout="main" data-model="APP.models.login">
  <script src="../scripts/ClientClass.js"></script>
  <h1 data-bind="html: title"></h1>
    <script src="../scripts/ClientClass.js"></script>
    <script>
        function printUsername() {
            var client = new client();
            client.printUsername();
        }
    </script>
     <ul data-role="listview" data-style="inset">
            <li>
     <label>Username
        <input type="text" value="" id="Username" />
    </label>
                </li>
         <li>
    <label>Password
        <input type="password" value="" />
    </label>
             </li>
         <li>
    <label>
        <button onclick="printUsername()" type="button">Submit</button>
    </label>
             </li>
         </ul>

</div>

Index.html:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
    <link href="styles/main.css" rel="stylesheet" />

    <script src="cordova.js"></script>
    <script src="kendo/js/jquery.min.js"></script>
    <script src="kendo/js/kendo.mobile.min.js"></script>

    <script src="scripts/app.js"></script>
    <script src="scripts/ClientClass.js"></script>

</head>
<body>
    <script src="scripts/ClientClass.js"></script>
    <script src="scripts/ClientClass.js"></script>

    <div data-role="layout" data-id="main">
        <div data-role="header">
            <div data-role="navbar">
                <span data-role="view-title"></span>
            </div>
        </div>

        <!-- application views will be rendered here -->

        <label>
            <input type="password" value="password" />
        </label>

        <div data-role="footer">
            <div data-role="tabstrip">
                <a href="views/home.html" data-icon="home">Home</a>   
                <a href="views/settings.html" data-icon="settings">Settings</a>
                <a href="views/contacts.html" data-icon="settings">Contacts</a>
            </div>
        </div>
    </div>

</body>
</html>

It says in the console:

uncaught type error: undefined is not a function.

Then it says it is at index.html#views/home.html:1 and when I click that and it takes me to sources panel of the debugger. And it says the source is index.html and it says:

(function() {with (this[2]) {with (this[1]) {with (this[0]) {return function(event) {printUsername() }; }}}})

Does anyone see any issues with my html or javascript? Or the way I import the script? Thanks

Upvotes: 0

Views: 284

Answers (1)

Goowik
Goowik

Reputation: 803

you are declaring your client as an object, not as a "class". So using new on your object doesn't make quite sense.

So it's up to you or you keep your object and simply remove:

var client = new client();

or you use a class

function Client(){}

Upvotes: 1

Related Questions