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

Html – Can I call an anonymous function inside a <scrip> tag linked to an external js file?

HTML File(firstHTML.html)

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<p id="demo">First Paragraph</p>
<p id="demo2">Second Paragraph should be something different</p>
<script src="myScript.js">
    show3();
</script>
</body>
</html>

JavaScript File(myScript.js)

let show3 = function() {
document.getElementById(‘demo2′).innerHTML=’I am trying to change the second paragraph using an anonymous function in an external JS file’;

};

I was expecting for the show() function to run since it’s below the

tag. I am still learning about javascript scope so it’s entirely possible that anonymous functions don’t have a global scale and so my function won’t run but why is my question. Thank you all in advance.

Tags:

4

Answers


  1. 0

    The issue was caused by calling show3() before the external JavaScript file had been loaded and parsed.

    <!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<p id="demo">First Paragraph</p>
<p id="demo2">Second Paragraph should be something different</p>

<script src="myScript.js"></script>
<script>
    // Wait for the DOM content to fully load
    document.addEventListener('DOMContentLoaded', function() {
        show3(); // Safe to call now
    });
</script>

</body>
</html>
    Login or Signup to reply.
  2. 0

    think of it like this.
    when you put src attribut to script tag
    all the content in the script tag will be replaced with code in source file.

    example:

    ❌ wrong way

    script.js

    console.log("hellow fron inside script.js file");

 const show = function(){
    console.log("show function called");
}

    inside index.html

        <script src="script.js"> show() </script>

// above script tag will be interpreted as

   <script> 
console.log("hellow fron inside script.js file"); 

const show = function(){
       console.log("show function called");
    }
</script>

    ✅ rights way

    index.html

         <script src="script.js"></script>
     <script> show()</script>

    or call show() function inside script.js also

    script.js

         console.log("hellow fron inside script.js file");

    const show = function(){
       console.log("show function called");
     }
   show();
    Login or Signup to reply.
  3. 0

    Excellent query! The problem is that until the external JavaScript file is fully loaded, any inline code, such as show3(), will not be executed by the element with the src attribute. You can utilize the window.onload event in your external JS file or call the function after the external script has completed loading to make sure it executes. You will quickly understand JavaScript scope if you continue to explore!

    Login or Signup to reply.
  4. 0

    Answer : Yes

    explanation

    when you use the src with the script tag its actually import javaScript you write in the file inside the script tag.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search