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

Watch Video

Posted March 9, 2018 6:04am by

Code Not Executing + Chrome Console Error

The code I'm typing in from Treasure Porth's tutorial doesn't execute (no popups). I reviewed it several times, but am unable to find my errors:

const box = document.querySelector('.box');

// box.style.display = 'none';

// jQuery('.box').hide();
// $('.box').hide();
// $('.box').show();

box.addEventListener('click', function(){ alert('You clicked me!');              
});

$('.box').click(function(){
  alert('You clicked me with jQuery');
});

Google Chrome Console Error:

Uncaught TypeError: Cannot read property 'addEventListener' of null at <anonymous>:8:5

Please have a look if you will.

8 Answers

March 9, 2018 9:11am

Can you share your HTML file? Maybe you didn't have an element with a class of box

March 9, 2018 8:36pm

Hi Samuel. Thanks for offering to help. Treasure didn't alter the html code in the video tutorial so neither did I. However, since you requested it here it is:

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Basics</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
  <div class="container">
    <h1>Hello jQuery!</h1>
    <div class="box"></div>
  </div>

    <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

March 10, 2018 2:00am

Hey, Mike. I tried your code and it's working fine on my side. That's weird...

Try console.log the box variable after you declare it to make sure you select the right element.

Or try this

const box = document.querySelector('.box');

box.addEventListener('click', function() {
  alert('You clicked me!');
});

$('.box').click(function() {
  alert('You clicked me with jQuery!');
});

March 10, 2018 2:15am

Samuel, I copied and pasted what you typed into the console and it gave me the exact same error.

March 10, 2018 2:22am

lol. So weird. How about you try it on your local machine?

March 10, 2018 8:41pm

I just tried it in JSFiddle and I still get no alert box. Steven Parker, you're very good at solving Javascript issues. Would you mind taking a look if you happen to be around?

March 10, 2018 8:51pm

I was alerted by your tag.

The only issue I see is that the element with the class of "box" is empty, providing nothing to click on.

Everything worked fine after adding some text to provide a "target".

    <div class="box">CLICK HERE</div>

March 10, 2018 9:07pm

Thank you so much for checking in so quickly, Steven! I appreciate all that you do for the Community and often read your solutions as I progress.

This is the first time in the entire Frontend track that I've been completely stumped. I've always been able to figure out the issue on my own until now. Even with your provided solution, it still doesn't fix it. Placing text into the div area of the html file does just that. Instead of a green box, now I have a green box with some text inside it. No alert box.

Also, JS code should pass in Console without having to input html. One other thing, Treasure Porth doesn't say to place text in the div area of the html file. You can get a quick peak of the html file if your'e quick by scanning the video, it's at the 00:36 second mark.

March 10, 2018 9:12pm

I was just using the code you provided here. If you already have a target that looks like a green box, then there's probably some CSS code that is not shown here which this code relies on.

To facilitate a complete analysis, you can make a snapshot of your workspace and post the link to it here.

March 10, 2018 10:07pm

Steven, here you go. The snapshot feature will come in handy. Thanks for the tutorial link.

jQuery Vs. JavaScript Snapshot: https://w.trhou.se/85pmmup3yw

Treasure will comment out different parts of the code at different times of the video. For instance, you shouldn't need both functions. You can comment out either one. I've tried both combinations and I can't get it to work either way.

March 10, 2018 10:34pm

With the CSS, the green area provides something to click on, you don't need to add text. And it seems to work fine, I got both the plain event alert and the jQuery alert on every click!

So I can confirm that it's not a code problem. Perhaps a browser setting? Most browsers allow you disable JavaScript, perhaps that's it. You might also try a different browser.

March 10, 2018 11:14pm

Javascript isn't turned off. I guess I'll leave it that for now unless someone else figures it out. Thanks for your help, Steven. I appreciate it.

July 10, 2018 10:31am

HI Mike, Tamika and Mighty Steven ,

Treasure told that functions like querySelector and querySelectorAll is not there in earlier browsers DOM.

So are we facing this issues beacause of browser Versions , may be the browser Mike and Tamika Using might not support these functionalities ?.

I'm not sure of this, just an educated guess !

July 10, 2018 2:04pm

Only if these are extremely old versions. Can I Use? indicates these have been in browsers since 2009 and present in 99.9% of currently tracked systems.

July 10, 2018 5:54pm

Hey Vasanth, I'm partying like it's 2019 over here.

January 2, 2019 12:51am

I'm having the same issue as Mike and Tamika, and Steven's solution didn't work for me. I'm not bothered but wanted to chime in that something is off with this code.

January 22, 2019 10:11am

Hey Mike,

Two things came to my mind:

1, try to avoid the const declaration and use var instead

2, try to put what's in app.js after a DOMContentLoaded event

January 22, 2019 5:33pm

Hi Adam,

Are you suggesting to never use const and instead use var? A little confused here... Using old tech isn't usually the way to provide a solution.

January 22, 2019 6:13pm

Hi Mike,

nope, just maybe your version of chrome has not interpreted it correctly. The 2nd suggestion looks more valid than the first one, it is just there, because I had no problem running your code.

Anyway 'var' is not "old tech", you have to know what is does and use it when appropriate (in this situation the const is a better choice obviously).

January 22, 2019 10:14pm

Please read through the comments. We've already established that it's not the age of the browser. I'm not the only student here experiencing the same issue. This isn't about appropriate uses of var let and const. I understand the differences, thank you.

January 22, 2019 10:16pm

Okay, and how about that the DOM is somehow not fully loaded for you before you try to reach that element? That's why I have suggested to put the whole logic into a dom loaded event listener.

January 22, 2019 10:54pm

To be precise:

   $(function() {
        const box = ...
        ...
   });

May 2, 2018 2:51am

Hi my name is Tamika. I have been having the exact same issue as Mike in regards to the jQuery code not working to hide the green box. I've done everything that Treasure has done and for some reason the box doesn't disappear. Basic JavaScript code works just fine. I was hoping maybe someone figured it out.

May 2, 2018 2:19pm

Try starting a fresh question and be sure to include your workspace snapshot and a link to the course page.

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Mike Hatch

Mike Hatch

Code Not Executing + Chrome Console Error

8 Answers

Samuel Zhen

Samuel Zhen

Mike Hatch

Mike Hatch

Samuel Zhen

Samuel Zhen

Mike Hatch

Mike Hatch

Samuel Zhen

Samuel Zhen

Mike Hatch

Mike Hatch

Steven Parker

Steven Parker

Mike Hatch

Mike Hatch

Steven Parker

Steven Parker

Mike Hatch

Mike Hatch

Steven Parker

Steven Parker

Mike Hatch

Mike Hatch

Vasanth Baskaran

Vasanth Baskaran

Steven Parker

Steven Parker

Mike Hatch

Mike Hatch

Ashley Shelden

Ashley Shelden

Adam Kubriczky

Adam Kubriczky

Mike Hatch

Mike Hatch

Adam Kubriczky

Adam Kubriczky

Mike Hatch

Mike Hatch

Adam Kubriczky

Adam Kubriczky

Adam Kubriczky

Adam Kubriczky

Tamika Dean

Tamika Dean

Steven Parker

Steven Parker