Question

190

Error in javascript: object is not a function

rated 0 times [ 194] [ 4] / answers: 1 / hits: 15406 / 12 Years ago, tue, august 14, 2012, 12:00:00

When I run my code below then it shows error object is not a function in console. This error is on this line var todo = new Todo('contents'); in my script.js file. How can I make it work?

Here is my todo.js file

var Todo = (function(c) {

var contents = $('.' + c);



var showel = function (d) {

    contents.prepend(d);

},



add = function (name) {

    if(name != ) {

        var div = $('<div class=names></div>')

        .append('<span>' + name + '</span>')

        .append(<button class='update' class='update'>Edit</button>)

        .append(<button class='remove' name='remove'>Remove</button>);

    }



    return showel(div);

},



addUpdateField = function (dom) {

    var name = dom.parent().find('span').text(),

        field = $('<input type=text value=' + name + ' />'),

        update = $('<button class=updateBtn>Update</button>');

    dom.parent().html('').append(field).append(update);



    return;

},



update = function(el) {

    var val = el.parent().find('input').val();

    el.parent().html('<span>' + val + '</span>')

    .append('<button class=update class=update>Edit</button>')

    .append('<button class=remove class=remove>Remove</button>');



    return;

},



remove = function (el) {

    return el.remove();

};



return {

    add             : add,

    update          : update,

    remove          : remove,

    addUpdateField  : addUpdateField

};

})();

here is my script.js file

$(function () {

var todo = new Todo('contents');



$('.addBtn').on('click', function() {

    var name = $(this).parent().find('input[type=text]').val();

    todo.add(name);

});



$('.contents').on('click', '.remove', function() {

    var el = $(this).parent();

    todo.remove(el);

});



$('.contents').on('click', '.update', function() {

    var dom = $(this);

    todo.addUpdateField(dom);

});



$('.contents').on('click', '.updateBtn', function() {

    var el = $(this);

    todo.update(el);

});



});

here is html code

<html>

<head>

<script type=text/javascript src=http://code.jquery.com/jquery-latest.js>    </script>

<script type=text/javascript src=todo.js></script>

<script type=text/javascript src=script.js></script>

<link rel=stylesheet type=text/css href=styles.css>

<title></title>

</head>



<body>

<div class=container>

    <label>Name</label>

    <input type=text class=name name=name />

    <input type=button class=addBtn name=add value=Add />

    <div class=contents></div>

</div>

</body>

</html>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

minab

Add To Favorites

Follow

Total Points: 701

Total Questions: 104

Total Answers: 91

Location: Saint Pierre and Miquelon

Member since Fri, Jan 28, 2022

2 Years ago

minab questions

1 Update a Table with React Hooks when a Row is Added, Deleted and Modified? [Issue: Gets Before Post and Delete]

Sat, Jul 10, 21, 00:00, 3 Years ago

1 How to click one button that exists two times with same name?

Fri, Feb 7, 20, 00:00, 4 Years ago

1 Unable to copy array using setstate hook

Tue, Oct 1, 19, 00:00, 5 Years ago

1 How to change day-format (M > Mo, F > Fr...) in Date/month pickers of Vuetify

Tue, Aug 20, 19, 00:00, 5 Years ago

1 Bootstrap Modal is not working in React JS

Thu, Jul 25, 19, 00:00, 5 Years ago

View All

answered 12 Years ago kristopher · Accepted Answer

You are immediately executing the function that is assigned to Todo. That function returns an object, so Todo refers to the returned object, not a function (hence the Not a function error).

I assume you intended something along the lines of this:

var Todo = function () {



    this.add = function () { //Note the use of `this` here

        //Do stuff

    };

    //etc...



}; //No self-invoking parentheses here

Now, Todo refers to a constructor function which you can invoke with the new operator, as you are currently trying to do.

Also note that this pattern will result in every instance of Todo having a separate copy of each method, which isn't very efficient. It would be better to declare the methods as properties of the prototype:

var Todo = function () {

    //Initialize the Todo instance

};

Todo.prototype.add = function () {

    //Do stuff

};

Now, all instance of Todo will share a single copy of the methods.