javascript jQuery code file not working when linked from HTML

Question

hi I am new to Javascript and I am trying to use jQuery but it doesn't work if I'm using it on another js file, but if directly inputted into my HTML file it works.

Here is the try.js file:

$("#btn1").click(fn1);

function fn1(){
    $("#heading1").fadeToggle();
}

and the HTML code:

<!DOCTYPE html> 

<html>
    <head>
        <title>Javascript trial ANIMATIONS </title>
        <script src="jquery.js"></script>
        <script src="try.js" type='text/javascript'></script>

    </head>
    <body>

        <h2 id="heading1">SETTING UP JQUERY</h2>
        <button id="btn1">click me</button>

    </body>


<HTML>

Also how can I see the library of jQuery while typing in another js file. I'm using vs code

Have you download jquery in your folder thats why you are using it like this ? `` — Always Helping, Aug 25 '20 at 03:38
Link your JS file just before the closing body tag. That might be the problem, coz while binding click event, the element with id "btn1" would not have been rendered, and that is why, event would not have been bind. — Pranav Rustagi, Aug 25 '20 at 03:40
Did you try moving `script` tag for `try.js` after `button` element? — Pranav Rustagi, Aug 25 '20 at 05:06
I would try putting it in a document.ready check. Your dom elements may not be rendered yet. Or perhaps you just need to move the include to the end of the body. — John Lord, Aug 25 '20 at 05:24

score 0 · Answer 1 · answered Aug 25 '20 at 03:41

0

May be you can use manipulation with dom when document will been load.

function fn1(){
    $("#heading1").fadeToggle();
} 

$(function() {
    $("#btn1").click(fn1);
});

answered Aug 25 '20 at 03:41

John V

875
6
12

thanks. I tried to paste your code into my try.js file but it still not working. I tried to put the one on my try.js file inside my HTML file and it worked. – Jovi Valderas Aug 25 '20 at 03:48

score 0 · Answer 2 · answered Aug 25 '20 at 03:45

0

Check out responses to this question. You might get an idea on how to proceed.

answered Aug 25 '20 at 03:45

Tafadzwa Chimberengwa

361
1
10

javascript jQuery code file not working when linked from HTML

2 Answers2