Question

I am writing javascript code with revealing prototype pattern for the first time. I am having problems. When I call add function when user clicks add button then it shows me this error in the console.

Uncaught TypeError: Cannot call method 'add' of undefined

How can I solve this problem?

here is my script.js code

$(function () {
var todo = 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 my todo.js code

var Todo = function(c) {
    this.contents = $('.' + c);
};

Todo.prototype = function() {
var showel = function (d) {
    this.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
};

}();

Update

After changing
var todo = Todo('contents');

to

var todo = new Todo('contents');

I get this error

Object [object Object] has no method 'add'

update 2

here is my on jsfiddle

Answer 1

You’re trying to assign Todo‘s prototype to a self-calling function. However, the prototype is just getting assigned to a function and not the expected return object.

Here’s your working fiddle. I assigned the prototype directly to an object with your methods.

Also, JS parses from top to bottom. Therefore, define your new instance of Todo after you declare what Todo is.

This is what a self-calling function should look like:

Todo.prototype = (function() {

    // ...

    return {
        add: add,
        update: update,
        remove: remove,
        addUpdateField: addUpdateField
    };

})();​