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

Troubleshooting Azure typescript function: Entry point for function cannot be determined

I am experiencing difficulties with my focusin not functioning properly for the input element that I added

Changing the size of an image in an HTML5 canvas

When the window is fully loaded, JavaScript executes

Execute the script when the document is fully loaded

What could be the reason for the absence of the loading sign in Chrome, even though it appears when the code is run on Firefox?

I'm curious about the process by which custom hooks retrieve data and the detailed pathway that custom hooks follow

Delivering XML in response to a webmethod call

Optimizing the performance of J2EE web applications

Successive pressing actions

Executing a cURL request using Node.js

Is it possible to retrieve a variable from a geojson file using Vue 3 and Vite?

Having trouble sending a function as a prop to a child component in React

Guide to rearranging the sequence of items in a selected jQuery collection

Does the react-google-login library utilize the services provided by Google Identity?

What is the process for displaying all cookies in node.js?

A guide on sending a post request with Axios to a parameterized route in Express

Most Effective Method for Switching CSS Style Height from "0" to "auto"

What is the method for configuring environment variables in the Lumber framework?

Discover the method to determine the total count of days in a given week number