How To Call A Javascript Function When The External Javascript File Is Referenced At The End Of The Html Body?

November 26, 2023 Post a Comment

I know that when you want to invoke a JavaScript function inside a HTML body section you can do it by putting inside your body tag, h

Solution 1:

1) The scripts are loaded linearly. Since the script has not yet been loaded, the function is undefined. (This is in contrast to function hoisting within a script.)

2) Simply wait till the page loads.

window.onload = function(){
    showAlert();
}

(Simply doing window.onload = showAlert won't work because of reason #1. Here you delay evaluation until such time that the function will exist.)

Solution 2:

Assuming you want to run showAlert() immediately when the page has loaded, try adding an onload() event handler to call showAlert rather than just calling it as the script loads. This can be done a few ways:

<bodyonload="showAlert();">

or define the window onload event programatically where your current function all is made in the html

window.onload = newfunction() {showAlert();}

or (and I think this is the preferred way because it won't cancel out other event handlers bound to the onload event)

window.addEventListener("load", showAlert);

Solution 3:

By default, scripts run sequentially. Your code doesn't work because showAlert() runs before loading Script.js, so at that point the function showAlert is not defined yet.

To make it work, you must delay the showAlert call.

The load event has already been mentioned in other answers, but it will wait for all resources (like images) to load. So listening to the DOMContentLoad event is usually better, the function will be called sooner.

<script>document.addEventListener('DOMContentLoaded', function() {
  showAlert();
});
</script><scriptsrc="data:text/javascript,
function showAlert() {
  console.log('Hello!')
}
"></script>

Solution 4:

The reason for your script isn't working is the way how a webpage is parsed..From top to bottom..Here is some link (would help to know why script added at bottom).

1) in your First case the browser loaded script when it parsed the page and when you called it in body it was available so it got invoked.

2) in Second scenario (My be typo) You have placed the call to function before loading the script that contain your function. so during page parsing browser wont find it and continue to next line where script containing function is loaded which has no effect for now as it already parsed the call.

If you still want to follow the second scenario you have to trigger the function call (after ensuring all resources being loaded ie Your script). so you can use window.load=<your function call> or in case of jQuery place it inside

$(document).ready(function(){
//call here
});

Solution 5:

Javascript processes in the order given. You are trying to call showAlert before showAlert have been defined. Change to:

<body><scripttype="text/javascript"src="/Script.js"></script><script>
        showAlert();
    </script></body>

and all should work as intended.

Html5 Tutorial