CODEWITHSUNDEEP
javascripthtml
Ojonugwa Jude Ochalifu
Ojonugwa Jude Ochalifu

Reputation: 27256

Html button not working with javascript

I created a simple app in PhyCharm and in my static folder i have a .js file and in my templates folder, a index.html file.

In my .js file, i have this:

console.log('loaded script.js');

$(document).ready(function () {

$("#submit").on('click', function (event) {
    handleClick();
});

});

function handleClick() {
  alert("We got here");
    $.ajax('/', {
       type: 'GET',
          data: {
          fmt: 'json'
      }
      });
   }

and this is the index.html:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="static/script.js"></script>
</head>
<body>
<input type="button" id="submit" value="Get It">
</body>
</html>

when the app loads, "loaded script.js" shows in the console, but the button click doesn't work. Am not sure why as the code looks fine to me.

Upvotes: 0

Views: 117

Answers (3)

gtmoripped
gtmoripped

Reputation: 23

Instead of cluttering up your .js file with...

$(document).ready(function () {

$("#submit").on('click', function (event) {
handleClick();
});

});

Why not simplify the entire thing by simply calling the function in the HTML.

<input type="button" id="submit" onclick="handleClick()" value="Get it">

Upvotes: 0

mwilson
mwilson

Reputation: 12980

You need to load your jQuery File

Update You shouldn't be loading your JavaScript in your <head> tag. You should be loading it at the bottom of your <body> tag.

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" id="submit" value="Get It">
<script src="static/jQuery.js"></script>
<script src="static/script.js"></script>
</body>
</html>

Upvotes: 1

rageit
rageit

Reputation: 3621

Everyone has given you the answer. This one uses Google's CDN.

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="static/script.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"/>
</head>
<body>
<input type="button" id="submit" value="Get It">
</body>
</html>

Refer to http://jsfiddle.net/hpX3e/ for an example.

Upvotes: 1

Related Questions