Can't call javascript class function

Viewed 9

I'm just getting into the more advanced JS so this might be all wrong, regardless.

I have defined a 'class' which I instantiate with var line = new lineObject(); and then I run line.init(some_integer). At this point I get a loadLineSetup is not a function message.

Where am I going wrong?

    function lineObject() {

        this.view                 = '';
        this.lineContainer        = null;
        this.lineEditSaveButton   = null;
        this.lineEditCancelButton = null;

        this.lineSetup = {
            description : {
                'element' : null,
                'content' : null
            }
        };

        this.init = function(lineId) {

            this.lineContainer = document.getElementById('sectionline_' + lineId);
            this.lineEditSaveButton = this.lineContainer.querySelector('button.js-line-editsave');
            this.lineEditCancelButton = this.lineContainer.querySelector('button.js-line-editcancel');

            this.lineSetup.description.element = this.lineContainer.querySelector('textarea.js-line-text');

            console.log(this);
            this.setupEventListeners();
        }

        this.loadLineSetup = function() {

            this.lineSetup.description.content = this.lineSetup.description.element.value;
            console.log('Experiment: this.lineSetup.description.content: ', this.lineSetup.description.content);
        }

        this.setupEventListeners = function() {

            // js-line-editsave click
            this.lineEditSaveButton.addEventListener('click', function() {
                this.loadLineSetup();
                console.log('Experiment: Line edit `save` button clicked');
            });

            // js-line-editcancel click
            this.lineEditCancelButton.addEventListener('click', function() {
                console.log('Experiment: Line edit `cancel` button clicked');
            });
        }
    }```
0 Answers
Related