Door Not Opening : error: Uncaught TypeError: Cannot set property 'onclick' of null

Projects
1

I’ve been working on the Chore Door Project and can’t seem to figure out why the door won’t open. I’ve watched the tutorial video and still can’t seem to detect what’s wrong with my code. Thank you in advance for the help!
Door was opening at step 10 when it was single.

I ran the code on another compiling platform the error was ‘error: Uncaught TypeError: Cannot set property ‘onclick’ of null’

<!DOCTYPE html>
<html>
  <head>
    <title>Chore Door!</title>
    <link href="./style.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet" type="text/css">
  </head>

  <body>
    <div class='door-row'>
      <img class='door-frame' id='#door1' src='https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg'>
      <img class='door-frame' id='#door2' src='https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg'>
      <img class='door-frame' id='#door3' src='https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg'>
      
    </div>
  
  </body>
  <script type="text/javascript" src="script.js"></script>
</html>


let d= document;
let doorImage1 = d.getElementById('door1');
let doorImage2 = d.getElementById('door2');
let doorImage3 = d.getElementById('door3');
let botDoorPath = 'https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg';
let beachDoorPath = 'https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg';
let spaceDoorPath = 'https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/space.svg';
doorImage1.onclick = () => {
  doorImage1.src = botDoorPath;
};
doorImage2.onclick = () => {
  doorImage2.src = beachDoorPath;
};
doorImage3.onclick = () => {
  doorImage3.src = spaceDoorPath;
};

I’ve tried other solutions to this including ‘defer’, calling script after body etc

2

Hello, @corepro41625, and welcome to the forums.

Looking at your html, I don’t see elements with id’s that match those specified above.

Also, you may want to review instruction #6 regarding the placement of the
<script></script> element.

1 Like
3

Thank you the problem was with the id. Such a silly mistake and this gave me a lesson for sure.

tags are working fine below the body tags.

Thank you

4

Hi so my .onclick function doesn’t work and it shows a error like uncaught typeerror: cannot set property onclick of null
here is my html & js code: ((its a bit messy )

Chore Door! 
<div class="header"><img src="https://content.codecademy.com/projects/chore-door/images/logo.svg"></div>

<div class="title-row">
  <img src="https://content.codecademy.com/projects/chore-door/images/star.svg">
  <p class="instructions-title">Instructions</p>
  <img src="https://content.codecademy.com/projects/chore-door/images/star.svg">
</div>
1 Hiding behind one of these doors is the ChoreBot.
2 Your mission is to oprn all the doors without running into the ChoreBot.
3 If you manage to avoid the ChoreBot untill you open the very last door, you win!
4 See if you can score a winning streak! 
<div class="door-row">
  <img id="door1" class="door-frame" src="https://content.codecademy.com/projects/chore-door/images/closed_door.svg">
  <img id="door2" class="door-frame" src="https://content.codecademy.com/projects/chore-door/images/closed_door.svg">
  <img id="door3" class="door-frame" src="https://content.codecademy.com/projects/chore-door/images/closed_door.svg">
</div>

<div id="start" class="start-row">Good luck!</div>

<script type="text/javascript" src="script.js"></script>

js :

let doorImage1 = document.getElementById(‘door1’)
let doorImage2 = document.getElementById(‘door2’)
let doorImage3 = document.getElementById(‘door3’)

let numClosedDoors = 3;
let currentlyPlaying = true;
let openDoor1 ;
let openDoor2 ;
let openDoor3 ;

const randomChoreDoorGenerator = () => {
let choreDoor = Math.floor(Math.random() * numClosedDoors)
if(choreDoor === 0) {
openDoor1 = botDoorPath
openDoor2 = beachDoorPath
openDoor3 = spaceDoorPath
}
else if(choreDoor === 1 ) {
openDoor2 = botDoorPath
openDoor1 = beachDoorPath
openDoor3 = spaceDoorPath
}
else if(choreDoor === 2) {
openDoor3 = botDoorPath
openDoor1 = beachDoorPath
openDoor2 = spaceDoorPath
}
}

const botDoorPath = “https://content.codecademy.com/projects/chore-door/images/robot.svg”

const beachDoorPath = “https://content.codecademy.com/projects/chore-door/images/beach.svg”

const spaceDoorPath = “https://content.codecademy.com/projects/chore-door/images/space.svg”

doorImage1.onclick = () => {
if(currentlyPlaying && !isClicked(doorImage1)) {
doorImage1.src = openDoor1
playDoor(doorImage1)
}
}

doorImage2.onclick = () => {
if (currentlyPlaying && !isClicked(doorImage2)) {
doorImage2.src = openDoor2
playDoor(doorImage2)
}
}

doorImage3.onclick = () => {
if(currentlyPlaying && !isClicked(doorImage3)) {
doorImage3.src = openDoor3
playDoor(doorImage3)
}
}

let startButton = document.getElementById(‘start’)

const gameOver = (status) => {
if(status === ‘win’){
startButton.innerHTML = ‘You win! Play again?’
}
else if(status === ‘start’) {
startButton.innerHTML = ‘start’
}
else {
startButton.innerHTML = ‘Game over! Play again?’
}
currentlyPlaying = false;
}

gameOver(‘start’)

const closedDoorPath = “https://content.codecademy.com/projects/chore-door/images/closed_door.svg”

const isBot = (door) => {
if(door.src === botDoorPath) {
return true;
} else {return false;}
}

const isClicked = (door) => {
if(door.src === closedDoorPath) {
return false;
}
else {return true;}
}

const playDoor = (door) => {
numClosedDoors–
if(numClosedDoors === 0) {
gameOver(‘win’) ;
}
else if(isBot(door)) {
gameOver() ;
}
}

randomChoreDoorGenerator()