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: stackoverflow.com/a/16063711/1641941 — HMR
– HMR, Commented Feb 23, 2014 at 11:39

elclanrs · Accepted Answer · 2014-02-23 04:22:15Z

0

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, 2014 at 4:22

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Marc Rasmussen Over a year ago

could you explain why the change name function at w3schools.com/js/js_objects.asp does not need the prototype and also explain what prototype is?

elclanrs Over a year ago

W3Schools isnt' the best resource, see w3fools.com. I recommend checking out the MDN for more info on objects, prototypes, inheritance...

rnrneverdies · Accepted Answer · 2014-02-23 16:09:49Z

0

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

edited Feb 23, 2014 at 16:09

answered Feb 23, 2014 at 4:36

rnrneverdies

15.7k9 gold badges67 silver badges95 bronze badges

Collectives™ on Stack Overflow

Javascript object functions

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related