Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Ryan Klement
Ryan Klement
9,825 Points

Javascript click event not working, help?

I'm trying to get a button to add elements to the DOM but it is not working. Next I tried making the button log something to the console to make sure that it is indeed working but this does not work either. Please see my code below and let me know if you can see what I'm doing wrong?

    <label for="addNew">Add New Task</label>
    <input type="text" placeholder="Type New Task Here"
            id="addNew">

    <input type="button" value="Go!" id="addNewButton">

the javascript in my external file is:

$("#addNewButton").click(function(){
    console.log("this button has been clicked!");
});

I have already verified that the external link works because I did a $(document).ready test and it worked.

2 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Ryan,

Do you have this click handler inside .ready()?

Or did you only test with that and are not currently using it?

Do you have your external js file loaded right before your closing body or do you have it in the head section?

It's usually recommended to load your scripts right before the closing body tag.

You might be running your script before the button is in the dom.

Ryan Klement
Ryan Klement
9,825 Points

Hi Jason,

I only tested with .ready() to ensure that my external javascript and jquery files were linked correctly. I have the external .js files loaded into the head at the moment. I tried loading the scripts right before the closing body tag and it still did not work.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Ok, put your jQuery and custom js files right before the closing body and if you can post that snippet of html for review it would be great.

At the top of your custom js file maybe put a simple console.log statement at the top and maybe even something jQuery related so you know both are working. What else do you have in that file right now besides the click handler you're trying to set up?

Put at the top of your file:

console.log("custom js is loaded");
console.log($('<div></div>'));
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Is your add button being added dynamically or does it exist when the page first loads?

Ryan Klement
Ryan Klement
9,825 Points

I think I got it now - I put the jquery file in the head and the javascript file with my code in it just before the closing body tag and the button works. Is it recommended to have the jquery file in the head?

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Generally it's recommended to have your scripts at the bottom before the closing body.

Richard Duncan
Richard Duncan
5,568 Points
Richard Duncan
Richard Duncan
5,568 Points

Hi Ryan,

Theres nothing wrong here with the code, have you checked that the file path to your .js file is correct and that it's actually being included in the page?

Next I would check that you have included jQuery correctly. Happy hunting!

Ryan Klement
Ryan Klement
9,825 Points

I'm pretty sure it is because I ran this:

$(document).ready(function() { console.log("javascript is working"); });

and it logged it correctly