jquery not working in browser

Question

This is my first time trying to work with JQuery and i am trying to deconstruct a piece of code i found online. It works in jsfiddle: JSFIDDLE. However, when i try to run the code in a browser, the part that is supposed to work when "create an account" is clicked, does not display. I have modified the code to work with the browser and it is as follows:

My index.html file:

<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="script.js" ></script>
    <link rel="stylesheet" type="text/css" href="style.css"/>
 </head>

 <body>

 <div class="login-page">
 <div class="form">
   <form class="register-form">
     <input type="text" placeholder="name"/>
     <input type="password" placeholder="password"/>
     <input type="text" placeholder="email address"/>
     <button>create</button>
     <p id="message">Already registered? <a href="#">Sign In</a></p>
   </form>
   <form class="login-form">
     <input type="text" placeholder="username"/>
     <input type="password" placeholder="password"/>
     <button>login</button>
     <p id="message">Not registered? <a href="#">Create an account</a> </p>
   </form>
 </div>
 </div>
 </body>

My script.js file:

$('.message a').click(function(){
   $('form').animate({height: "toggle", opacity: "toggle"}, "slow");
});

All the files are in the same directory. Any ideas on what might be wrong?

`It works in jsfiddle. However, when i try to run the code in a browser` - what? jsfiddle runs in the browser — Jaromanda X, Apr 01 '18 at 02:16
Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Sebastian Simon, Apr 01 '18 at 02:27
@JaromandaX what I meant is when i run the index.html in the browser — kenny, Apr 01 '18 at 02:31

score 1 · Accepted Answer · answered Apr 01 '18 at 02:15

1

You're running the Javascript in the header, before the document has been fully parsed, so the handler you're adding isn't attaching to anything. Either give the script the defer attribute to force it to load once everything's been parsed:

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

or put the script at the very bottom:

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

answered Apr 01 '18 at 02:15

CertainPerformance

260,466
31
181
209

Basically what Certain means by "fully parsed" is that you're attempting to add an event handler to an element when you load your `script.js` file before the element has been created. Normally, this would spit out an error in your console, but jQuery handle these errors so you don't see anything. – Matthew Apr 01 '18 at 02:18
1

It's not so much that jQuery handles the errors, but that it's the equivalent of `document.querySelectorAll('.message a').forEach(a => ...` - which would produce no errors in vanilla JS as well - there are just no items to iterate over. – CertainPerformance Apr 01 '18 at 02:19
Weird, I've had errors thrown at me before when I did it manually. Maybe it was browser specific that I did something to it without noticing. – Matthew Apr 01 '18 at 02:21
@CertainPerformance, weirdly, neither of those approaches worked. – kenny Apr 01 '18 at 02:30
@kenny, what happens? Are you sure the script runs with no errors? Is jQuery defined properly when the script runs? – CertainPerformance Apr 01 '18 at 02:34
@CertainPerformance after trying it again, I realise that it does work. Thanks a lot for the help! – kenny Apr 01 '18 at 21:23

score 0 · Answer 2 · answered Apr 01 '18 at 03:32

Write your code like this, it will work. I modify your code on jsfiddle, check https://jsfiddle.net/xeyaaqte/7

$(function () {
    $('.message a').click(function (e) {
        e.preventDefault();
        alert("test")
        $('form').animate({ height: "toggle", opacity: "toggle" }, "slow");
    });
});

jquery not working in browser

2 Answers2