Javascript object functions

Question

i am trying to learn and understand objects in javascript and has come up with the following script:

    jQuery(document).ready(function(){
    var test = new Project('Anton');
    $('#btn_add_project').click(function(){
        test.addElement();
    });
});
function Project(name)
{
    this.panel = $('#worksheet_panel');
    this.name = name;
    function changeName(name)
    {
        this.name = name;
    }

    function addElement()
    {
        this.element =
            '<div id="1" class="col-md-3 table-bordered worksheet_overall_box" draggable="true" ondragstart="drag(event)">'+
                '<div class="table-bordered title_box">'+
                '<h4 class="title text-center worksheet_title">Dansk handicap</h4>'+
                '</div>'+
                '<div class="worksheet_box">'+
                '    <div class="list-group ">'+
                '        <a href="#" class="list-group-item">'+
                '            <h5 class="list-group-item-heading">Marc</h5>'+
                '            <p class="list-group-item-text">...</p>'+
                '        </a>'+
                '    </div>'+
                '    <div class="list-group ">'+
                '        <a href="#" class="list-group-item">'+
                '            <h5 class="list-group-item-heading">'+name+'</h5>'+
                '            <p class="list-group-item-text">...</p>'+
                '        </a>'+
                '    </div>'+
                '    <div class="list-group">'+
                '        <button class="btn-block btn-primary btn">Add</button>'+
                '    </div>'+
                '</div>'+
                '</div>';
        this.panel.appendChild(this.element);
    }


}

however when i run the click function i get the following error:

    TypeError: test.addElement is not a function

test.addElement();

can anyone tell me what i am doing wrong?

There is more to know about using prototype in JavaScript than just the syntax. Like what is the value of `this`. The following answer might be of help to you: http://stackoverflow.com/a/16063711/1641941 — HMR, Feb 23 '14 at 11:39

score 1 · Accepted Answer · answered Feb 23 '14 at 04:22

1

addElement is a function declaration available only inside the scope of Project. Attach the function to the prototype to make it available for new instances, where this refers to the instance.

Project.prototype.addElement = function() {
  this.element = ...
};

answered Feb 23 '14 at 04:22

elclanrs

92,861
21
134
171

could you explain why the change name function at http://www.w3schools.com/js/js_objects.asp does not need the prototype and also explain what prototype is? – Marc Rasmussen Feb 23 '14 at 04:23
W3Schools isnt' the best resource, see http://www.w3fools.com/. I recommend checking out the [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain) for more info on objects, prototypes, inheritance... – elclanrs Feb 23 '14 at 04:26

rnrneverdies · Answer 2 · 2014-02-23T16:09:49.977

fashion where, addElement is an internal function of the constructor. You must add it to the prototype so that it is available on instances of the class.

There are different ways to code a class in javascript (i.e. different syntax) but all end up in the same internal structure.

I usually use this syntax: an anonimous function which declares the class. I then export it to a namespace declared out.

// declare a namesapce 
var NAMESPACE = NAMESPACE || {};

(function() {

  function Project() {

  }

  Project.prototype.addElement = function() {

  }

  // export here!
  NAMESPACE.Project = Project;

})();

var test = new NAMESPACE.Project();

test.addElement();

Javascript object functions

2 Answers2