How to call a JavaScript function after script is loaded?

You have a couple of options to call a JavaScript function after a script is loaded:

1. Inline Script

Place the function call directly after the script tag in your HTML file. This ensures that the function is called immediately after the script is loaded.

```html
<script src="your_script.js"></script>
<script>
    // Call your function here
    yourFunction();
</script>
```
</code></pre>
<h3>2. Event Listener</h3>
<p>Use the <code>DOMContentLoaded</code> event or <code>load</code> event to call the function when the DOM content or the entire page is loaded, respectively.</p>
<pre><code>```html
<script src="your_script.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        // Call your function here
        yourFunction();
    });
</script>
```
</code></pre>
<h3>3. Async/Await with Promises</h3>
<p>If your script is loaded asynchronously, you can use async/await with promises to ensure that the function is called after the script is loaded.</p>
<pre><code>```html
<script>
    async function loadScript(url) {
        let script = document.createElement('script');
        script.src = url;

        await new Promise((resolve, reject) => {
            script.onload = resolve;
            script.onerror = reject;
            document.head.appendChild(script);
        });
    }

    async function callFunctionAfterScriptLoaded() {
        await loadScript('your_script.js');
        // Call your function here
        yourFunction();
    }

    callFunctionAfterScriptLoaded();
</script>
```

Choose the method that best fits your use case and coding style.