Chore door project local images is stopping the js

i finished the chore door project. And am fine tuning it for myself. I wanted to replace the 3 image-links (beach, bot etc) in js by 3 local images. Funny thing is: i can replace the path by the local images path. It works fine. The images are displayed, only the js game proces is not working well, if you lose, you still get the message you win. very bizar. I uploaded the 3 images to a site and then placed these links into the js filepath and now it works. How come i cant replace them with local images? Do i need a database?

Would you mind sharing your JS code? I think that would make it easier.

(and in case you need it… How do I format code in my posts?)

let doorImage1 = document.getElementById('door1');
let doorImage2 = document.getElementById('door2');
let doorImage3 = document.getElementById('door3');
let startButton = document.getElementById('start');
//the three links below i wanted to replace by local images
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 closedDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg";
let numClosedDoors=3;
let openDoor1;
let openDoor2;
let openDoor3;
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 playDoor = (door) => {
  numClosedDoors--;
  if (numClosedDoors === 0) {
    gameOver("win");
  }else if (isBot(door)) {
    gameOver("lose");
  }
}
const randomChoreDoorGenerator = () => {
const 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 { (choreDoor === 2)
openDoor3 = botDoorPath;
openDoor1 = beachDoorPath;
openDoor2 = spaceDoorPath;
}
}


door1.onclick = () => {
  if(currentlyPlaying && !isClicked(door1)) {
  doorImage1.src=openDoor1;
  playDoor(door1);
}
}
door2.onclick = () => {
  if(currentlyPlaying && !isClicked(door2)) {
  doorImage2.src=openDoor2;
 playDoor(door2);
}
}
door3.onclick = () => {
  if(currentlyPlaying && !isClicked(door3)) {
  doorImage3.src=openDoor3;
  playDoor(door3);
}
}
startButton.onclick = () => {
    startRound();
}
const startRound = () => {
 
  door1.src = closedDoorPath;
  door2.src = closedDoorPath;
  door3.src = closedDoorPath;
  numClosedDoors = 3;
  currentlyPlaying = true;
  startButton.innerHTML = 'Good luck!';
  randomChoreDoorGenerator();
}
const gameOver = (status) => {
  if (status === 'win') {
  startButton.innerHTML = 'You win! Play again?';
} else {
  startButton.innerHTML = 'Game over! Play again?'
}
currentlyPlaying = false;
}
startRound();

I wanted to make it a local project, with different ccs, images etc… It all works fine, exept when i replace the three links by a local image. The images are visible in the site (chrome) and the doors open etc, but js sticks to ‘‘you won’’. When i replace the local images by the links again, it works well. Puzzles me.

At the very top of your code you have this declarations:

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

but for your click events you do:

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

See how isClicked is passed door1 rather than doorImage1 ? and then same later when you call playDoor(). Does fixing that change the behavior in your local test?

Edit:
You also do it in your function startRound() when you do:

door1.src = closedDoorPath;
door2.src = closedDoorPath;
door3.src = closedDoorPath;

where I think you meant to use doorImage1, 2, 3

Thanks for your information and your time. I changed all that. I even tried the js code from the s3amazonaws site (that surely is correct), but still: when i upload local images instead of the links, it all works fine, except you never lose… Puzzles me. Might it be the size of the images?. But that would be odd, because when i link the exact same images via a https it works fine. Its not a problem because it works now, was just curious why i cant use a filepath to a local folder…

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.