Html Question posted in
Some basic documentation can be found here.

I can't manage to call a js function placed after the HTML

I have an HTML page with a js script in it. I have to place the script after the HTML (or load it after the page loading) because it needs an HTML tag to create a graph.
But I also need to export this graph with a button afterwards, but if my whole script is after the body, I can’t call the function because it doesn’t exist already. And if I pu the script before the body, the graph doesn’t have an html tag to be.

I don’t see how I could manage to make it work, if you have an idea I’m all for it.

I hope it’s clear, tell me if it’s not.

(Simplified code here, ask if you want whole code)

I tried this but the function is not defined.

<script type="text/javascript">
    window.addEventListener("load", (event) => {
        var graph = functionMakingAGraphAt("#balise");

        myFunctionPrint() {
            console.log(graph);
        };
    })
</script>

<body>
    <div id="balise"></div>
    <button onclick='myFunctionPrint()'></button>
</body>

I tried this but the graph var doesn’t exists.

<script type="text/javascript">
    window.addEventListener("load", (event) => {
        var graph = functionMakingAGraphAt("#balise");
    })
    myFunctionPrint() {
        console.log(graph);
    };
</script>

<body>
    <div id="balise"></div>
    <button onclick='myFunctionPrint()'></button>
</body>

I have to precise that I think I can’t access the generated graph html tag because it’s a jointjs library graph.

Tags:

2

Answers


  1. 0

    If your createGraph function is dependent on the readiness of specific HTML tags, you can still structure your code to ensure that the graph is created after those HTML tags are ready. Here’s an example:

    <!DOCTYPE html>
<html lang="en">
<head>
    <!-- Your head content -->
</head>
<body>
    <!-- Your HTML content -->

    <div id="balise">
        <!-- The container where your graph will be created -->
    </div>

    <script>
        // Your script to create the graph
        function createGraph() {
            // Ensure that the required HTML tags are ready
            const container = document.getElementById('balise');
            if (container) {
                // Code to create the graph and store relevant values
                const graphData = /* ... */;
                return graphData;
            } else {
                console.error("graphContainer not found. Cannot create graph.");
                return null;
            }
        }

        // Your script for exporting the graph
        function exportGraph() {
            // Get the graphData from createGraph
            const graphData = createGraph();

            if (graphData) {
                // Code to export the graph using graphData
                console.log("Exporting graph with data:", graphData);
            } else {
                console.error("Graph data not available. Export failed.");
            }
        }

        // Run the createGraph function after the HTML has loaded
        document.addEventListener("DOMContentLoaded", function () {
            const graphData = createGraph();
            // You can use graphData as needed
        });
    </script>

    <!-- Rest of your HTML content -->

    <button onclick="exportGraph()">Export Graph</button>
</body>
</html>

    In this example, the createGraph function checks if the required HTML tags (in this case, the container with the ID graphContainer) are ready before proceeding with creating the graph. If the container is not found, an error message is logged, and the function returns null. The exportGraph function then checks whether the graph data is available before proceeding with the export.

    This ensures that the createGraph function is executed after the necessary HTML tags are ready, and you can export the graph data as needed. Adjust the code based on your specific requirements and the structure of your HTML document.

    Login or Signup to reply.
  2. 0

    You can use unobtrusive event handling with addEventListener for all your events. You can put this event handler to run when the page is loaded too – this will mean that the graph variable can be in scope correctly.

    Also the est event to handle on the main window, to ensure everything in the page is ready for use before you execute any of this code is DOMContentLoaded.

    Demo:

    document.addEventListener("DOMContentLoaded", (event) => {
  var graph = functionMakingAGraphAt("#balise");
  var btn = document.querySelector("#print");
  btn.addEventListener("click", function() {
    console.log(graph);
  });

  //stub function definition for demo
  function functionMakingAGraphAt(id) { return "test"; }
})
    <body>
  <div id="balise"></div>
  <button id="print" type="button">Print</button>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search