jquery only works in html file, not in separate script.js file

Question

I have searched other answers for an resolution to this, but it seemed everyone was simply placing their external .js file before the google api jquery link. This, however, is not my case.

html file (named "index.html"):

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="script.js"></script>
    </head>

I have this in the body of my html file to create the button:

<div class="input">
    <input type="button" id="test" value="CLICK ME" style="width: 500px; height: 100px" />
</div>

script file (named "script.js"):

$(document).ready(function(){
    $("#test").click(function(){
        $(this).hide();
        alert("You clicked it!");
    })
})

When I click the button on my site, nothing happens. I have tried multiple configurations of the order for the script file and google api, but nothing else has worked for me.

However, I do know that my script works because when I place my code inside the html file, under the script tag, my code works (the button vanishes and displays the alert). I'm assuming there's a syntax error of some sort in my file linking, but I'm not sure.

Could be your src path. Check the network console in Chrome and see if the script.js file is loading correctly (as opposed to not found). Also, get any console errors? (Note that I am taking your word that it works correctly directly in HTML, obviously what Suresh says is correct, but perhaps that's a typo as you claim it works fine) — musefan
– musefan, Commented May 30, 2017 at 15:34
this is the DOM element, it has no hide() method. You need the jQuery object, so you need $(this) instead of this — Ricola3D
– Ricola3D, Commented May 30, 2017 at 15:38

Matt D · Accepted Answer · 2017-05-30 16:07:12Z

1

<script src="/script.js" type="text/javascript"></script>

I needed to add a "/" to the path.

answered May 30, 2017 at 16:07

Matt D

3971 gold badge5 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

jquery only works in html file, not in separate script.js file

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related