HTML, javascript and jQuery - Beginner

Question

I just started learning HTML, javascript and jQuery, but I can't link these three together. So far what I did is: HTML file:

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script type="text/javascript" src="test.js"></script>
    <link rel="stylesheet" href="test.css" type="text/css"/>
</head>
<body>
    <button class="alert-btn">Click me for alert</button>
</body>

javascript file:

$(".alert-btn").click(function(){
    alert("Hey there!");
});

So as you can see, I tried to put the links in the head part of html file, but it's not working. What am I doing wrong, or what do I need to add?

If you want to interact with the HTML (in your case by assigning a click handler), you should wait until the HTML is fully loaded. You can do this by wrapping all your JS code in $( document ).ready(...) see: learn.jquery.com/using-jquery-core/document-ready — Mike Scotty
– Mike Scotty, Commented Aug 16, 2016 at 14:54
Maybe your path to javascript file is not correct. Look here, it works fine: jsfiddle.net/ovc6p0kq/2 — Teuta Koraqi
– Teuta Koraqi, Commented Aug 16, 2016 at 14:54

Ashkan Mobayen Khiabani · Accepted Answer · 2016-08-16 14:56:37Z

3

If the code:

$(".alert-btn").click(function(){
    alert("Hey there!");
});

is in the file test.js you should load this file after the DOM elements are loaded:

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <link rel="stylesheet" href="test.css" type="text/css"/>
</head>
<body>
    <button class="alert-btn">Click me for alert</button>
    <script type="text/javascript" src="test.js"></script>
</body>

answered Aug 16, 2016 at 14:56

Ashkan Mobayen Khiabani

34.3k35 gold badges111 silver badges187 bronze badges

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

Comments

sgr0691 · Accepted Answer · 2016-08-16 14:58:02Z

0

I would definitely use the `$( document ).ready(...) up in the header.

answered Aug 16, 2016 at 14:58

sgr0691

296 bronze badges

Collectives™ on Stack Overflow

HTML, javascript and jQuery - Beginner

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related