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 Joshua Comrie
Joshua Comrie
3,861 Points

Javascript 'Uncaught TypeError:'

Hey guys. So i'm new to JS and following a freecodecamp tutorial on a Rock, Paper, Scissors game. I keep receiving this error message in the console:

script.js:11 Uncaught TypeError: Cannot read property 'addEventListener' of null at script.js:11 (anonymous) @ script.js:11

Here's the code I entered, that calls the error:

rock_div.addEventListener('click', function(){ console.log("You clicked rock!"); })

The video can be seen here: https://www.youtube.com/watch?v=jaVNP3nIAv0&t=2185s The part can be seen around 34:00 minutes in.

If anyone could help it would be much appreciated.

Thanks!

2 Answers

Kevin Gates
Kevin Gates
15,053 Points

Hi there, the only thing I can think of is that you're missing a semicolon at the end of your addEventListener. Or if you changed the order. It works for me:

const userScore = 0;
const computerScore = 0;
const userScore_span = document.getElementById("user-score");
const computerScore_span = document.getElementById("computer-score");
const scoreBoard_div = document.querySelector(".score-board");
const result_div = document.querySelector(".result");
const rock_div = document.getElementById("r");
const paper_div = document.getElementById("p");
const scissors_div = document.getElementById("s");

rock_div.addEventListener('click', function(){
    console.log("You clicked rock!");
});

EDIT: One Additional note, move your script to the end of the body. Just thinking, it actually is trying to load it for you before the HTML exists, so it could be a race condition.

Kevin Gates
Kevin Gates
15,053 Points

So make your HTML this:

<!DOCTYPE html>
<html lang="en">
 <head>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Asap" rel="stylesheet">
  <title>Rock Paper Scissors!</title>
 </head>
<body> 
 <header>
  <h1>Rock Paper Scissors</h1>
 </header>

<div class="scoreboard">
    <div id="user-label" class="badge">user</div>
    <div id="computer-label" class="badge">comp</div>
    <span id="user-score">0</span>:<span id="computer-score">0</span>
</div>

<div class="result">
    <p>Paper covers rock. You win!</p>
</div>

<div class="choices">
    <div class="choice">
        <img src="Rock.png" id="r"></div>
    <div class="choice">
        <img src="Paper.png" id="p"></div>
    <div class="choice" id="s">
        <img src="Scissors.png"></div>
</div>

<p id="action-message">Make your move</p>
<script src="script.js"></script>
</body>
</html>
Joshua Comrie
Joshua Comrie
3,861 Points

Hi Kevin, thanks for helping out. Unfortunately that isn't working for me for some reason :/ I've literally copied and pasted it and still nothing. Thanks anyway EDIT: Just seen your part about the HTML and now it works fine! Thank you so much! :)

Kevin Gates
Kevin Gates
15,053 Points
Kevin Gates
Kevin Gates
15,053 Points

Can you copy and paste all of your code here? Also, use the Markdown Cheatsheet to style your code.

Sounds like though that rock_div doesn't exist, which is why you're getting a null reference. Did you declare that variable before that code is being run?

Joshua Comrie
Joshua Comrie
3,861 Points

<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="stylesheet.css"> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Asap" rel="stylesheet"> <title>Rock Paper Scissors!</title> </head> <body> <script src="script.js"></script> <header> <h1>Rock Paper Scissors</h1> </header>

<div class="scoreboard">
    <div id="user-label" class="badge">user</div>
    <div id="computer-label" class="badge">comp</div>
    <span id="user-score">0</span>:<span id="computer-score">0</span>
</div>

<div class="result">
    <p>Paper covers rock. You win!</p>
</div>

<div class="choices">
    <div class="choice">
        <img src="Rock.png" id="r"></div>
    <div class="choice">
        <img src="Paper.png" id="p"></div>
    <div class="choice" id="s">
        <img src="Scissors.png"></div>
</div>

<p id="action-message">Make your move</p>

</body> </html>

Joshua Comrie
Joshua Comrie
3,861 Points

const userScore = 0; const computerScore = 0; const userScore_span = document.getElementById("user-score"); const computerScore_span = document.getElementById("computer-score"); const scoreBoard_div = document.querySelector(".score-board"); const result_div = document.querySelector(".result"); const rock_div = document.getElementById("r"); const paper_div = document.getElementById("p"); const scissors_div = document.getElementById("s");

rock_div.addEventListener('click', function(){ console.log("You clicked rock!"); })