Javascript Interactive Chore Door

Community
1

I am working on the Chore Door exercise in Javascript Interactive Website course. When clicking on the doors my doors don’t open (the images behind the doors don’t load). The following is my code:

let doorImage1 = document.getElementById("door1");

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"

let doorImage2 = document.getElementById("door2");

let doorImage3 = document.getElementById("door3");

let numClosedDoors = 3;

let openDoor1;
let openDoor2; 
let openDoor3;

let closedDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg"

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

function playDoor() {
  numClosedDoors--;
  if (numClosedDoors === 0) {
    gameOver();
  }
}

const randomChoreDoorGenerator = () => {
  var 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 = spaceDoorPath;
    openDoor2 = beachDoorPath;
}
  
}



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

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

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

I tried using another text editor to see if it’s a bug on Codecademy. This is what I get:

https://codepen.io/cmoster/full/Eeebre

2

the most logic place this could go wrong is here:

const randomChoreDoorGenerator = () => {
  var 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 = spaceDoorPath;
    openDoor2 = beachDoorPath;
}
  
}

given this assign the open door images to the different doors

have you tried debugging here? See the value of different variable you are using here?

3

I’m having the same issue. As soon as I add the openDoor variables and randomChoreDoorGenerator function, the doors cease to open even if I keep the on.click functions as explicitly set to botDoorPath, even if I comment the randomChoreDoorGenerator out.

OK, so as soon as I posted here my code started working. No idea why.

I had the same thing happening cmoster, but I had returns infront of all my openDoor variables inside the randomDoor function. I took them out and everything started working fine.

I see that here;

var choreDoor = Math.floor(Math.random() * numclosedDoors);

you are missing a capital C in ‘numclosedDoors’, maybe that’s part of it?

4

yep, but i wanted cmoster to find this, helping him in this debug process. Given you need to learn to debug.

5

Shoot, sorry bout that.

6

Hey all, yes, the cap C was the issue so thank you for guiding me along to find that error in my code. BUT, BUT, to be clear, on Codecademy, the doors actually never opened. It’s only when I copy and past the code to CodePen, another front-end developer testing platform that my code actually works. On Codecademy, when I click on the doors NOTHING happens. On CodePen, the code works fine.

7

i had it working on codecademy, maybe refresh the page?

8

I had the very same problem. I’m in step 45/70 this is my code:

let doorImage1 = document.getElementById('door1');
let doorImage2 = document.getElementById('door2');
let doorImage3 = document.getElementById('door3');

let openDoor1;
let openDoor2;
let openDoor3;

const numClosedDoors = 3;

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 randomChoreDoorGenerator = () => {
  const choreDoor = Math.floor(Math.randon() * numClosedDoors);
  if ( choreDoor === 0 ) {
    openDoor1 = botDoorPath;
    openDoor2 = beachDoorPath;
    openDoor3 = spaceDoorPath;
  } else if ( choreDoor === 1 ) {
    openDoor2 = botDoorPath;
    openDoor1 = beachDoorPath;
    openDoor3 = spaceDoorPath;
  } else {
    openDoor3 = botDoorPath;
    openDoor1 = beachDoorPath;
    openDoor2 = spaceDoorPath;
  }
}

doorImage1.onclick = () => {
  doorImage1.src = openDoor1;
}

doorImage2.onclick = () => {
  doorImage2.src = openDoor2;
}

doorImage3.onclick = () => {
  doorImage3.src = openDoor3;
}

randomChoreDoorGenerator();

After clicking on the doors, it’s not the “doorPaths” that are rendered on the page, but instead they link here: https://8d076c62e44b48bd97bfe0453c3d61bd.cc-propeller.cloud/undefined

Instead of here: "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/… :thinking:

9

if you look in the console, you see:

TypeError: Math.randon is not a function script.js:16:32

which tells you the problem.

10

thank you :slight_smile:

11

learning how to use the console and debugger is very useful