Invoking a JavaScript class using a script tag

Question

Invoking a JavaScript class using a script tag

In my code, I have a class declaration in a script that is imported before the body tag:

$(document).ready(function(){

  var FamilyTree = function() {
  };
  FamilyTree.prototype.displayMessage=function() {
    alert("test");
  }
});

Then, within the body of the HTML document, I have the following code inside a script tag:

$(document).ready(function(){
    var famtree= new FamilyTree();
    famtree.displayMessage();
});

However, when I load the page, Firefox shows this error message:

ReferenceError: FamilyTree is not defined

Even though the class is defined before it is called, for some reason it is inaccessible. What could be causing this issue?

javascript class

Answer 1

Answer №1

The focus of FamilleTree is restricted to the closure contained within document.ready. Once you try to access the variable from another function, it goes out of scope. To tackle this issue, consider declaring FamilleTree outside of $(document).ready like shown below:

var FamilyTree = function(tree) {
  this.tree = tree;
};

$(document).ready(function(){

  FamilyTree.prototype.drawTree = function() {
    $('#tree1').tree({
        data: this.tree,
        dragAndDrop: true
    });
  }
});

Answer 2

The focus of FamilleTree is restricted to the closure contained within document.ready. Once you try to access the variable from another function, it goes out of scope. To tackle this issue, consider declaring FamilleTree outside of $(document).ready like shown below:

var FamilyTree = function(tree) {
  this.tree = tree;
};

$(document).ready(function(){

  FamilyTree.prototype.drawTree = function() {
    $('#tree1').tree({
        data: this.tree,
        dragAndDrop: true
    });
  }
});

Invoking a JavaScript class using a script tag

Answer №1

Similar questions

What is the process for triggering a PHP function when a form element is clicked in a webpage?

The javascript function ceases to operate once the div is refreshed

Instructions for adjusting the size of my modal window when the keyboard appears?

What mechanism does the useState() function utilize in React to fetch the appropriate state object and function for a functional component when employing the state hook?

Choose particular spreadsheets from the office software

Accessing the `this` element in ES6 after binding to the class

Do you require assistance with creating an image slideshow?

Tips for accessing form data that has been automatically uploaded in PHP

Tips for invoking a particular function when a row in a Kendo grid is clicked

Remove the default selection when a different option is chosen using Bootstrap

Utilizing ng-model in AngularJS to add data to an array in Mongoose and MongoDB

Are Primereact and MUI JOY Styling at Odds?

Modifying Array Values in Angular 7

Redirecting with response headers in Next.js

Challenges faced during the implementation of a personalized transport system in Sentry

When the React functional component changes its state, it triggers the un-mounting and re-mounting of its parent

"Is there a specific way to designate the content type as multipart form data when using Axios

What is the best way to maintain the selected radio button on the following page using PHP?

Can you help me understand how to access data from a selected option?

Activate the display by utilizing the getElementsByClassName method