Chore Door Finished Steps, Clicking on Door Results in 404 Image

I’m not sure where I went wrong. I completed all the steps and still can’t figure out why when I click on a door, a little “image” replaces what should be the space, beach, or bot images. It’s like the script can’t find the image sources anymore, however, everything worked fine when I checked around step 66. Thanks in advance for helping me:

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

let botDoorPath = "https://content.codecademy.com/projects/chore-door/images/robot.svg";

let beachDoorPath = "https://content.codecademy.com/projects/chore-door/images/beach.svg";

let spaceDoorPath = "https://content.codecademy.com/projects/chore-door/images/space.svg";

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

let openDoor1 ;
let openDoor2 ;
let openDoor3 ;

let 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 playDoor = (door) => {
  numClosedDoors--;
  if (numClosedDoors === 0) {
    gameOver("win");
  } else if (isBot(door)) {
    gameOver();
  };
};

doorImage1.onclick = () => {
  if (currentlyPlaying && !isClicked(door1)) {
    doorImage1.src = openDoor1;
    playDoor(door1);
  }
};
doorImage2.onclick = () => {
  if (currentlyPlaying && !isClicked(door2)) {
  doorImage2.src = openDoor2;
  playDoor(door2);
  };
};
doorImage3.onclick = () => {
  if (currentlyPlaying && !isClicked(door3)) {
  doorImage3.src = openDoor3;
  playDoor(door3);
  };
};

const startRound = () => {
  door1.src = closedDoorPath;
  door2.src = closedDoorPath;
  door3.src = closedDoorPath;
  numClosedDoors = 3;
  startButton.innerHTML = "Good luck!";
  randomChoreGenerator;

};

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



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

let numClosedDoors = 3;

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

startRound();

This is one project I almost always tell users they should check the developer tools console. Codecademy doesn’t provide a console for this lesson so it won’t notify you of errors in your code, but if you open up the dev tools, you’ll see what error is being thrown.

Hint if needed

Take a look at how randomChoreGenerator() is being called.

ah, thank you, i didn’t realize that devtools would help me because it didn’t seem like there was an outright error in my code, just something that didn’t connect.

But now once I click the start button for a new game, none of the doors are opening… I included “currentlyPlaying;” in the startRound function, but it hasn’t helped. That would be the last thing I need to call this game functional.

When you say you included currentlyPlaying in the startRound function, do you mean you are setting it to true within the function?

Could you post what your code looks like right now?

yes, it looks like it’s set to true. Here’s my code:

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

let botDoorPath = "https://content.codecademy.com/projects/chore-door/images/robot.svg";

let beachDoorPath = "https://content.codecademy.com/projects/chore-door/images/beach.svg";

let spaceDoorPath = "https://content.codecademy.com/projects/chore-door/images/space.svg";

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

let openDoor1 ;
let openDoor2 ;
let openDoor3 ;

let 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 playDoor = (door) => {
  numClosedDoors--;
  if (numClosedDoors === 0) {
    gameOver("win");
  } else if (isBot(door)) {
    gameOver();
  };
};

doorImage1.onclick = () => {
  if (currentlyPlaying && !isClicked(door1)) {
    doorImage1.src = openDoor1;
    playDoor(door1);
  }
};
doorImage2.onclick = () => {
  if (currentlyPlaying && !isClicked(door2)) {
  doorImage2.src = openDoor2;
  playDoor(door2);
  };
};
doorImage3.onclick = () => {
  if (currentlyPlaying && !isClicked(door3)) {
  doorImage3.src = openDoor3;
  playDoor(door3);
  };
};

const startRound = () => {
  door1.src = closedDoorPath;
  door2.src = closedDoorPath;
  door3.src = closedDoorPath;
  numClosedDoors = 3;
  startButton.innerHTML = "Good luck!";
  randomChoreDoorGenerator();
  currentlyPlaying;
};

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



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

let numClosedDoors = 3;

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

startRound();```

Currently you mention the variable currentlyPlaying but you aren’t actually doing anything with it. To make it true you will actually have to assign it that value.

i thought merely writing it indicates that it’s true?

for example, in if (currentlyPlaying && !isClicked) currentlyPlaying is true just by its being written.

When should I know to write the assignment =true; ?

If you mention just the name in a comparison operator, the program will check if it is true. This provides a short hand way of checking the boolean value of a variable. For example, this:

if (variable1 && !variable2) {
  //code block
}

Is the same as writing this:

if (variable1 == true && variable2 != true) {
  //code block
}

However this shorthand method is limited to comparison. If you want to give a different value to a variable, you have to use the assignment operator:

variable1 = true;
variable2 = false;

ah, i see now. the shorthand is for comparisons, but it doesn’t work during assignments. thanks very much for your help.

1 Like