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
– Jaromanda X, Commented Apr 1, 2018 at 2:16
Possible duplicate of Why does jQuery or a DOM method such as getElementById not find the element? — Sebastian Simon
– Sebastian Simon, Commented Apr 1, 2018 at 2:27
@JaromandaX what I meant is when i run the index.html in the browser — kenny
– kenny, Commented Apr 1, 2018 at 2:31

CertainPerformance · Accepted Answer · 2018-04-01 02:15:26Z

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 1, 2018 at 2:15

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

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

6 Comments

Matthew Over a year ago

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.

CertainPerformance Over a year ago

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.

Matthew Over a year ago

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.

kenny Over a year ago

@CertainPerformance, weirdly, neither of those approaches worked.

CertainPerformance Over a year ago

@kenny, what happens? Are you sure the script runs with no errors? Is jQuery defined properly when the script runs?

|

Anirudha Gupta · Accepted Answer · 2018-04-01 03:32:32Z

0

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");
    });
});

answered Apr 1, 2018 at 3:32

Anirudha Gupta

9,3579 gold badges58 silver badges84 bronze badges

Collectives™ on Stack Overflow

jquery not working in browser

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related