JavaScript jQuery Basics Introducing jQuery jQuery vs. JavaScript

Mike Hatch
Mike Hatch
8,925 Points

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.

3 Answers

Samuel Zhen
Samuel Zhen
26,080 Points

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

Mike Hatch
Mike Hatch
8,925 Points

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>
Samuel Zhen
Samuel Zhen
26,080 Points

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!');
});
Mike Hatch
Mike Hatch
8,925 Points

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

Samuel Zhen
Samuel Zhen
26,080 Points

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

Mike Hatch
Mike Hatch
8,925 Points

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?

Steven Parker
Steven Parker
127,509 Points

:bell: 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>
Mike Hatch
Mike Hatch
8,925 Points

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.

Steven Parker
Steven Parker
127,509 Points

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.

Mike Hatch
Mike Hatch
8,925 Points

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.

Steven Parker
Steven Parker
127,509 Points

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.

Mike Hatch
Mike Hatch
8,925 Points

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.

Tamika Dean
Tamika Dean
12,772 Points

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.

Steven Parker
Steven Parker
127,509 Points

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