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.

JavaScript

Joshua Comrie
Joshua Comrie
3,861 Points
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
14,855 Points
Kevin Gates
Kevin Gates
14,855 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
14,855 Points
Kevin Gates
Kevin Gates
14,855 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
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
14,855 Points
Kevin Gates
Kevin Gates
14,855 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
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
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!"); })