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?

Answer 1

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();

Answer 2

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 = ...
};