Chore Door Javascript Project


#1

Hi there, would someone please be able to look at my code - the doors aren’t currently opening when I click. I’ve had a long look but can’t figure out why.

Many thanks, please find my js code below:

script.js:

let doorImage1 = document.getElementById(‘door1’);

let doorImage2 = document.getElementById(‘door2’);

let doorImage3 = document.getElementById(‘door3’);

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

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

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

startButton.onclick = () => {
if (currentlyPlaying === false) {
startRound() {
numClosedDoors = 3;
doorImage1.src = closedDoorPath;
doorImage2.src = closedDoorPath;
doorImage3.src = closedDoorPath;
startButton.innerHTML = ‘Good luck!’;
currentlyPlaying = true;
randomChoreDoorGenerator();
}
}
}

const botDoorPath = ‘https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg’;
const beachDoorPath = ‘https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg’;
const spaceDoorPath = ‘https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/space.svg’;
const ClosedDoorPath = ‘https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg’;

const currentlyPlaying = true;

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

const startButton = document.getElementById(‘start’);

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

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

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

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

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


#2

Ordering of listeners and callbacks is critical. The callbacks should appear in the source listing before any listeners refer to them.

cached objects (const)
running variables (let) **
handlers (const)
listeners

None of the cached objects will ever change so they can be declared as, const.

Running variables that are set in the startGame function don’t need to be initialized.

let currentlyPlaying, numClosedDoors;
let openDoor1, openDoor2, openDoor2;

const doorImage1 = document.getElementById(‘door1’);
...
const ClosedDoorPath = ‘https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg’;
...

** Be sure that any variable that is likely to see its value change should not be a const; i.e., numClosedDoors, &c.


#3

Like this? It’s still not working -

let doorImage1 = document.getElementById(‘door1’);

let doorImage2 = document.getElementById(‘door2’);

let doorImage3 = document.getElementById(‘door3’);

const botDoorPath = ‘https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg’;
const beachDoorPath = ‘https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg’;
const spaceDoorPath = ‘https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/space.svg’;
const ClosedDoorPath = ‘https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg’;

let currentlyPlaying = true;

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

const startButton = document.getElementById(‘start’);

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

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

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

startButton.onclick = () => {
if (currentlyPlaying === false) {
startRound() {
numClosedDoors = 3;
doorImage1.src = closedDoorPath;
doorImage2.src = closedDoorPath;
doorImage3.src = closedDoorPath;
startButton.innerHTML = ‘Good luck!’;
currentlyPlaying = true;
randomChoreDoorGenerator();
}
}
}

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

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

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

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

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


#4

Close, but your callbacks are still below the listeners. Move all the onlclick event listeners to the bottom of the source code.


#5

Ok I moved them to the bottom of the code. Is this what you mean? Still isn’t working for some reason.

let doorImage1 = document.getElementById(‘door1’);

let doorImage2 = document.getElementById(‘door2’);

let doorImage3 = document.getElementById(‘door3’);

const botDoorPath = ‘https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg’;
const beachDoorPath = ‘https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg’;
const spaceDoorPath = ‘https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/space.svg’;
const ClosedDoorPath = ‘https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg’;

let currentlyPlaying = true;

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

const startButton = document.getElementById(‘start’);

startButton.onclick = () => {
if (currentlyPlaying === false) {
startRound() {
numClosedDoors = 3;
doorImage1.src = closedDoorPath;
doorImage2.src = closedDoorPath;
doorImage3.src = closedDoorPath;
startButton.innerHTML = ‘Good luck!’;
currentlyPlaying = true;
randomChoreDoorGenerator();
}
}
}

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

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

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

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

const randomChoreDoorGenerator = () => {
const choreDoor = Math.floor(Math.random() * numClosedDoors);
if (choreDoor === 0) {
openDoor1 = botDoorPath;
openDoor2 = beachDoorPath;
openDoor3 = spaceDoorPath;
} else if (choreDoor === 1) {
openDoor1 = beachDoorPath;
openDoor2 = spaceDoorPath;
openDoor3 = botDoorPath;
} else if (choreDoor === 2) {
openDoor1 = spaceDoorPath;
openDoor2 = botDoorPath;
openDoor3 = beachDoorPath;
}
}
door1.onclick = () => {
if(currentlyPlaying && !isClicked(doorImage1)) {
doorImage1.src = openDoor1;
playDoor(door1);
}
}

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

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


#6

Also,

The startbutton listener should call the startRound function, not contain it.

const startRound = () => {

};

startButton.onclick = () => {
    if (! currentlyPlaying) {
        startRound();
    }
};

For better organization, group all the cached nodes together and have them all declared as const.

cached nodes
cached objects
running variables
callbacks
generate doors
startRound
listeners

#7

But then what about this (bolded)? Where am i putting that section?

let doorImage1 = document.getElementById(‘door1’);

let doorImage2 = document.getElementById(‘door2’);

let doorImage3 = document.getElementById(‘door3’);

const botDoorPath = ‘https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg’;
const beachDoorPath = ‘https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg’;
const spaceDoorPath = ‘https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/space.svg’;
const ClosedDoorPath = ‘https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg’;

let currentlyPlaying = true;

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

const startButton = document.getElementById(‘start’);

const startRound = () => {

}
startButton.onclick = () => {
if (currentlyPlaying === false) {
startRound()
}
}
{
** numClosedDoors = 3;**
** doorImage1.src = closedDoorPath;**
** doorImage2.src = closedDoorPath;**
** doorImage3.src = closedDoorPath;**
** startButton.innerHTML = ‘Good luck!’;**
** currentlyPlaying = true;**
** randomChoreDoorGenerator();**
** }**
** }**
}

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

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

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

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

const randomChoreDoorGenerator = () => {
const choreDoor = Math.floor(Math.random() * numClosedDoors);
if (choreDoor === 0) {
openDoor1 = botDoorPath;
openDoor2 = beachDoorPath;
openDoor3 = spaceDoorPath;
} else if (choreDoor === 1) {
openDoor1 = beachDoorPath;
openDoor2 = spaceDoorPath;
openDoor3 = botDoorPath;
} else if (choreDoor === 2) {
openDoor1 = spaceDoorPath;
openDoor2 = botDoorPath;
openDoor3 = beachDoorPath;
}
}
door1.onclick = () => {
if(currentlyPlaying && !isClicked(doorImage1)) {
doorImage1.src = openDoor1;
playDoor(door1);
}
}

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

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


#8

The code block belongs to startRound().

const startRound = () => {
  numClosedDoors = 3;
  doorImage1.src = closedDoorPath;
  doorImage2.src = closedDoorPath;
  doorImage3.src = closedDoorPath;
  startButton.innerHTML = ‘Good luck!’;
  currentlyPlaying = true;
  randomChoreDoorGenerator();
};

#9

Ok i fixed that, my doors are still not opening when i click them :frowning:

let doorImage1 = document.getElementById(‘door1’);

let doorImage2 = document.getElementById(‘door2’);

let doorImage3 = document.getElementById(‘door3’);

const botDoorPath = ‘https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg’;
const beachDoorPath = ‘https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg’;
const spaceDoorPath = ‘https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/space.svg’;
const ClosedDoorPath = ‘https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg’;

let currentlyPlaying = true;

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

const startButton = document.getElementById(‘start’);

const startRound = () => {
numClosedDoors = 3;
doorImage1.src = closedDoorPath;
doorImage2.src = closedDoorPath;
doorImage3.src = closedDoorPath;
startButton.innerHTML = ‘Good luck’;
currentlyPlaying = true;
randomChoreDoorGenerator();
}

startButton.onclick = () => {
if (!currentlyPlaying === false) {
startRound();
}
}

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

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

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

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

const randomChoreDoorGenerator = () => {
const choreDoor = Math.floor(Math.random() * numClosedDoors);
if (choreDoor === 0) {
openDoor1 = botDoorPath;
openDoor2 = beachDoorPath;
openDoor3 = spaceDoorPath;
} else if (choreDoor === 1) {
openDoor1 = beachDoorPath;
openDoor2 = spaceDoorPath;
openDoor3 = botDoorPath;
} else if (choreDoor === 2) {
openDoor1 = spaceDoorPath;
openDoor2 = botDoorPath;
openDoor3 = beachDoorPath;
}
}
door1.onclick = () => {
if(currentlyPlaying && !isClicked(doorImage1)) {
doorImage1.src = openDoor1;
playDoor(door1);
}
}

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

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


#10

We should never need to compare a value to false.

a = true
if (! a) {
    // do something
}

That something will only happen if a is false. That’s because ! recasts it to the toggled boolean. false becomes true and the code executes. When true becomes false the branch is not followed.


#11

Changed it but its still not working -

let doorImage1 = document.getElementById(‘door1’);

let doorImage2 = document.getElementById(‘door2’);

let doorImage3 = document.getElementById(‘door3’);

const botDoorPath = ‘https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg’;
const beachDoorPath = ‘https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg’;
const spaceDoorPath = ‘https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/space.svg’;
const ClosedDoorPath = ‘https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg’;

let currentlyPlaying = true;

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

const startButton = document.getElementById(‘start’);

const startRound = () => {
numClosedDoors = 3;
doorImage1.src = closedDoorPath;
doorImage2.src = closedDoorPath;
doorImage3.src = closedDoorPath;
startButton.innerHTML = ‘Good luck’;
currentlyPlaying = true;
randomChoreDoorGenerator();
}

startButton.onclick = () => {
if (currentlyPlaying === false) {
startRound();
}
}

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

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

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

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

const randomChoreDoorGenerator = () => {
const choreDoor = Math.floor(Math.random() * numClosedDoors);
if (choreDoor === 0) {
openDoor1 = botDoorPath;
openDoor2 = beachDoorPath;
openDoor3 = spaceDoorPath;
} else if (choreDoor === 1) {
openDoor1 = beachDoorPath;
openDoor2 = spaceDoorPath;
openDoor3 = botDoorPath;
} else if (choreDoor === 2) {
openDoor1 = spaceDoorPath;
openDoor2 = botDoorPath;
openDoor3 = beachDoorPath;
}
}
door1.onclick = () => {
if(currentlyPlaying && !isClicked(doorImage1)) {
doorImage1.src = openDoor1;
playDoor(door1);
}
}

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

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


#12

Spelling error. Should start with a small c.


#13

still not working -

let doorImage1 = document.getElementById(‘door1’);

let doorImage2 = document.getElementById(‘door2’);

let doorImage3 = document.getElementById(‘door3’);

const botDoorPath = ‘https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg’;
const beachDoorPath = ‘https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg’;
const spaceDoorPath = ‘https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/space.svg’;
const closedDoorPath = ‘https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg’;

let currentlyPlaying = true;

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

const startButton = document.getElementById(‘start’);

const startRound = () => {
numClosedDoors = 3;
doorImage1.src = closedDoorPath;
doorImage2.src = closedDoorPath;
doorImage3.src = closedDoorPath;
startButton.innerHTML = ‘Good luck’;
currentlyPlaying = true;
randomChoreDoorGenerator();
}

startButton.onclick = () => {
if (currentlyPlaying === false) {
startRound();
}
}

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

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

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

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

const randomChoreDoorGenerator = () => {
const choreDoor = Math.floor(Math.random() * numClosedDoors);
if (choreDoor === 0) {
openDoor1 = botDoorPath;
openDoor2 = beachDoorPath;
openDoor3 = spaceDoorPath;
} else if (choreDoor === 1) {
openDoor1 = beachDoorPath;
openDoor2 = spaceDoorPath;
openDoor3 = botDoorPath;
} else if (choreDoor === 2) {
openDoor1 = spaceDoorPath;
openDoor2 = botDoorPath;
openDoor3 = beachDoorPath;
}
}
door1.onclick = () => {
if(currentlyPlaying && !isClicked(doorImage1)) {
doorImage1.src = openDoor1;
playDoor(door1);
}
}

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

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


#14

Are there cached nodes by the name of door1, or door2 or door3?


#15

What does that mean?


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

playDoor needs an input parameter :wink:

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

#17

Your cached element nodes are, doorImage1, doorImage2, doorImage3, and startButton. Anything that is captured using getElementById().


#18

Hi there, I have a similar issue but I’m only in the very beginning of the project. So I wrote

let doorImage1 = document.getElementByID(‘door1’);
let botDoorPath = “https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg”;
door1.onclick = () =>{
doorImage1.src = botDoorPath
};

I followed the instructions on the walk-through video and the function should change my image to the bot image, only it doesn’t.
Any idea what’s wrong with the code?


#19

The code has a cached element node, doorImage1 gleaned from the DOM using id, door1. That is where door1 stops, though. It’s an identifier in the document, not a variable in the program namespace.

The global event listener needs to be attached to a node that exists in that namespace, the one declared as doorImage1.


Disclaimer

One must admit to not having seen the video, so let me apologize if my response is out of context. It’s based on what I see in the post, not the video. I’ll set some time aside to watch it and maybe some new light will be shed upon your question. If you are being misdirected, then we surely want to mitigate it and prevent it further.

Please help me along with a link to the project so I can watch the video. Thanks.


#20

Thank you @mtf!
It’ll be great if you could have a look. Here’s the link to the walk-trough video.

The part where she describes the specific action is at around 7:45 min