Welcome to the Treehouse Community
The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

Joshua Comrie
3,861 PointsJavascript '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
14,855 PointsHi 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
14,855 PointsCan 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
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
3,861 Pointsconst 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!"); })
Kevin Gates
14,855 PointsKevin Gates
14,855 PointsSo make your HTML this:
Joshua Comrie
3,861 PointsJoshua Comrie
3,861 PointsHi 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! :)