Game logic fails when img src is local

Good evening,

I completed the chore door project and was working with it locally to see what I can do to alter it. I ran into a problem I can’t fix, but moreover, I don’t understand it.

I map the HTML element to a variable, map the URL to the picture to a variable and then it proceeds as expected. However, when I change the link to the picture to a local image file the functionality of the game breaks. The image link works in so far as the doors ‘open’ randomly upon being clicked, but you cannot lose the game. When the bot door is opened, you see the bot, but you can continue to click. Again, this only happens when the image path is local.

I suspect this is something very simple that I’m missing, but I would appreciate help in finding it.

Thanks in advance.

This is the code that works:

// Connecting to the HTML door (objects)?
let doorImage1 = document.getElementById('door1');
let doorImage2 = document.getElementById('door2');
let doorImage3 = document.getElementById('door3');

// Links to images for each clicked door.
let botDoorPath = 'https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg';
let spaceDoorPath = 'https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg';
let beachDoorPath = 'https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/space.svg';
let closedDoorPath = 'https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg';

// Global variables.
let numClosedDoors = 3;
let openDoor1;
let openDoor2;
let openDoor3;
let startButton = document.getElementById('start');
let currentlyPlaying = true;

// Checking to see if the door is a bot.
const isBot = (door) => {
  if (door.src === botDoorPath) {
    return true;
  } else {
    return false;
  }
}

// Checking if player has already clicked a door. If the door still has closedDoorPath, it has not been clicked.
const isClicked = (door) => {
  if (door.src === closedDoorPath) {
    return false;
  } else {
    return true;
  }
}

// Moves the game closer to the winning condition of numClosedDoors === 0.
const playDoor = (door) => {
  numClosedDoors--; 
  if (numClosedDoors === 0) {
    gameOver('win');
  } else if (isBot(door)) {
    gameOver();
  }
} 
// Randomly choosing which door has the bot.
let randomChoreDoorGenerator = () => {
  let choreDoor = Math.floor(Math.random() * numClosedDoors);
  if (choreDoor === 0) {
    openDoor1 = botDoorPath;
    openDoor2 = spaceDoorPath;
    openDoor3 = beachDoorPath;
  } else if (choreDoor === 1) {
    openDoor1 = beachDoorPath;
    openDoor2 = botDoorPath;
    openDoor3 = spaceDoorPath;
  } else {
    openDoor1 = spaceDoorPath;
    openDoor2 = beachDoorPath;
    openDoor3 = botDoorPath;
  }
}

/* Functionality for clicking doors and changing the image.
The HTML displays a closed door and upon clicking the img src is generated by the result of the randomChoreDoorGenerator. */
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);
  }
}

// startRound, what the start button needs to do.
const startRound = () => {
  numClosedDoors = 3;
  doorImage1.src = closedDoorPath;
  doorImage2.src = closedDoorPath;
  doorImage3.src = closedDoorPath;
  startButton.innerHTML = 'Good luck!';
  currentlyPlaying = true;
  randomChoreDoorGenerator();
}

// Refreshing the game and restarting it.
startButton.onclick = () => {
  if (currentlyPlaying === false) {
    startRound();
  }
}

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

// Calling the randomChoreDoorGenerator to test functionality.
//randomChoreDoorGenerator();
startRound();

And making this small change breaks it in the way I described:

// Links to images for each clicked door.
let botDoorPath = './public/myPicture.jpg'; // <-- The only change
let spaceDoorPath = 'https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg';
let beachDoorPath = 'https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/space.svg';
let closedDoorPath = 'https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg';