Chore Door - Need Help Adding My Own Images

I successfully completed the Chore Door project, and now I’m trying to add my own images. Everything works just fine until I update the closedDoorPath with the link to my new image, and then clicking the doors doesn’t yield any results, and nothing shows up in the console to indicate what might be wrong.

I copied all the code from the Codecademy website and have my own files on my own computer, so the links to the images are local and they work. The new closed door image shows up, but the doors don’t change when I click on them.

Any ideas?

Here’s my code:

let doorImage1 = document.getElementById('door1');
let doorImage2 = document.getElementById('door2');
let doorImage3 = document.getElementById('door3');
const botDoorPath = "https://s3..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 = "images/closedDoor.jpg";
let numClosedDoors = 3;
let openDoor1;
let openDoor2;
let openDoor3;
const startButton = document.getElementById('start');
let currentlyPlaying = true;

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 gameOver = (status) => {
  if(status === "win") {
    startButton.innerHTML = "You Win! Play again?";
  } else {
    startButton.innerHTML = "Game over! Play again?"
  }
  currentlyPlaying = false;
}

const playDoor = (door) => {
  numClosedDoors--;
  if(numClosedDoors === 0) {
    gameOver("win");
  } else if(isBot(door)) {
    gameOver();
  }
}

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

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);
}
}

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

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

startRound();

I’m not exactly sure why this worked, but it did, and I thought I’d share in case someone else is having this issue.

I uploaded the images from my computer to an image hosting website, and used the url from there in place of my local file path. Worked like a charm :slight_smile: