jQuery doesnt work in an external javascript file

Question

So I'm a beginner in JavaScript.

I have this simple HTML file where I tried to test jQuery with $("h1").hide() and my problem is that the jQuery code works in the HTML but when I try to put this code in an external JavaScript file testjs.js and insert it via script tag to the head, it doesn't works anymore. Just to be clear, the external JavaScript file is recognized, for example when I put document.write("third test") in the external JS file it will show "third test". Hope I've been clear

<!doctype html>
<html>
    <head>
        <title>Test</title>
         <meta charset="utf-8"/>
         <script src="jquery-3.3.1.min.js"></script>
         <script src="js/testjs.js"></script>
   </head>
   <body>
       <h1>first test</h1>
       <p>second test</p>

   <!-- this works only here but not in external js file
   <script>
    $("h1").hide();
   </script>
   -->
   </body>
</html>

Put <script src="js/test.js"> line at the bottom of <body> tag — Kamil Kiełczewski
– Kamil Kiełczewski, Commented Apr 11, 2018 at 17:39
No need to add <script> tags in other file. And add script file at bottom — Ash
– Ash, Commented Apr 11, 2018 at 17:39
either move the file to the bottom before the </body> or wrap the code in $(function() { $("h1").hide(); }); — mplungjan
– mplungjan, Commented Apr 11, 2018 at 17:43

Ian Foulk · Accepted Answer · 2018-04-11 17:43:32Z

4

It could be that the DOM has not loaded the h1 element you are trying to hide. Try using this code in testjs.js.

$(document).ready(function() {
    $('h1').hide();
});

When manipulating elements you should wait for the document to fully load.

answered Apr 11, 2018 at 17:43

Ian Foulk

514 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ele · Accepted Answer · 2018-04-11 17:54:36Z

2

The problem is regarding to document loading execution. The execution of $('h1').hide() is happening just before the document is fully loaded.

Three alternatives

Put the script at the bottom of the body.

    <script src="js/testjs.js"></script>
</body>

Bind the event DOMContentLoaded and put the logic of hiding within it.

document.addEventListener("DOMContentLoaded", function(event) {
   $('h1').hide();
});

Use the built-in function ready from jQuery

$(document).ready(function() {
    $('h1').hide();
});

edited Apr 11, 2018 at 17:54

answered Apr 11, 2018 at 17:47

Ele

33.8k7 gold badges43 silver badges80 bronze badges

Collectives™ on Stack Overflow

jQuery doesnt work in an external javascript file

2 Answers 2

Comments

Three alternatives

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Three alternatives

Comments

Your Answer

Sign up or log in

Post as a guest

Related