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');
});
}
}```