Javascript Object with a method returns "has no method 'my method name'" error

Question

I am trying to build my own objects with methods in JavaScript however, failed at my first ever try with the following code returning the complete code along with " has no method 'writeOut' in the chrome dev tools console.

    var link = function bhLink(options)  { 

        defaultOptions = {
            targetURL: '#',
            target: '_blank',
            textColor: '#000',
            bgColor: '#fff',
            font: 'Arial',
            fontSize:  '12px',
            lineHeight: '12px',
            text: '[Test]'
        }

            if (typeof options == 'object') {
                options = $.extend(defaultOptions, options);
            } else {
                options = defaultOptions;
            }

        link.prototype.writeOut = function() {
            return $('<a></a>')
                .prop({'href':this.targetURL, 'target': this.target})
                .css({'font-family':this.font, 'color':this.textColor, 'font-size': this.fontSize, 'line-height':this.lineHeight});
        }
    } // end link

I use it like

$('#id_of_some_button').click(function(e) {
    e.preventDefault();
    $('#id_of_some_div').html(link.writeOut);
});

Both the click event and the link is within $(document).ready({}); blocks.

Any ideas?

EDIT ==============================================

Added options as argument and an if statement to check wether there are options provided..

did you execute link? if not, then it hasn't been giving the writeOut method yet. Usually methods are added to the prototype outside of the constructor. — user400654
– user400654, Commented Nov 1, 2013 at 18:35
First problem: link.writeOut accesses a property, while link.writeOut() executes a method. — Blazemonger
– Blazemonger, Commented Nov 1, 2013 at 18:47
Commenters! Please also see the point where I state this is my first try.. getting embarressed here! :) — Subliminal Hash
– Subliminal Hash, Commented Nov 1, 2013 at 18:48

Rory McCrossan · Accepted Answer · 2013-11-01 18:37:47Z

2

Your syntax is very strange for an attempt at building an object containing methods. Firstly, you are attempting to access the defaultOptions object by just using this. Secondly, the call to writeOut in the html() block is only passing the function reference, not instantiating the function. Try this:

var link = {    
    defaultOptions: {
        targetURL: '#',
        target: '_blank',
        textColor: '#000',
        bgColor: '#fff',
        font: 'Arial',
        fontSize: '12px',
        lineHeight: '12px',
        text: '[Test]'
    },
    writeOut: function () {
        return $('<a></a>', { 
            'text': this.defaultOptions.text,
            'href': this.defaultOptions.targetURL,
            'target': this.defaultOptions.target
        })
        .css({
            'font-family': this.defaultOptions.font,
            'color': this.defaultOptions.textColor,
            'font-size': this.defaultOptions.fontSize,
            'line-height': this.defaultOptions.lineHeight
        });
    }    
} // end link

$('#id_of_some_button').click(function (e) {
    e.preventDefault();
    $('#id_of_some_div').append(link.writeOut());
});

Example fiddle

answered Nov 1, 2013 at 18:37

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

2 Comments

Subliminal Hash Over a year ago

Thanks Rory, it is working now. This is my first attempt so please excues if that seemed like garbage. But your answer will definitely give me a good start at this. Also, I took out the parts where the function accepts an options object as argument and if I wanted to check if the argument is valid, then need to replace the default options. in this case, how would your answer be modified? e.g. please see the update to my question in a minute..

Rory McCrossan Over a year ago

If you're passing options around it sounds more like you're creating a plugin. Try this: jsfiddle.net/PAG2Q. Note the $.extend line which overrides the default options object with any passed in to the plugin call - note I override the text option

Collectives™ on Stack Overflow

Javascript Object with a method returns "has no method 'my method name'" error

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related