Chore Door Project: Images returning a 404 error onclick?

Projects
1

Hey, Im doing the chore door project here:https://www.codecademy.com/paths/web-development/tracks/build-interactive-websites/modules/web-dev-interactive-websites/projects/chore-door

and despite a few hurdles it was going well, but now im getting a 404 error when trying to onclick the doors at step 57. The closed door shows up fine, but when I “open” them, they switch to the little broken image icon, and link here: https://13eb99aaf2f14f5cbdc0a8181b12e715.cc-propeller.cloud/undefined

They switched to the correct images previously, and the code itself seems to be working fine.

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Chore Door!</title>
    <link href="./style.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet" type="text/css">
  </head>

  <body>
    <div class="header">
      <img src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/logo.svg">
    </div>
    
    <div class="title-row">
      <img src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/star.svg">
      <p class="instructions-title">Instructions</p>
      <img src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/star.svg">
    </div>
    
    <table class="instructions-row">
      <tbody>
      	<tr>
          <td class="instructions-number">1</td>
          <td class="instructions-text">Hiding behind one of these doors is the ChoreBot.</td>
        </tr>
      	<tr>
          <td class="instructions-number">2</td>
          <td class="instructions-text">Your Mission is to open all of the doors without running into the ChoreBot.</td>
        </tr>
      	<tr>
          <td class="instructions-number">3</td>
          <td class="instructions-text">If you manage to avoid the ChoreBot until you open the very last door, you win!</td>
        </tr>
      	<tr>
          <td class="instructions-number">4</td>
          <td class="instructions-text">See if you can score a winning streak!</td>
        </tr>
      </tbody>
    </table>
    
		<div class="door-row">
      <img id="door1" class="door-frame" src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg">
      <img id="door2" class="door-frame" src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg">
      <img id="door3" class="door-frame" src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg">
    </div>
    
    <div id="start" class="start-row">
      Good luck!
    </div>
  
  </body>
  <script type="text/javascript" src="script.js"></script>
</html>

CSS

body {
  background-color: #010165;
  margin: 0px;
}

.header{
  background-color: #00ffff;
  text-align: center;
}

.title-row{
  margin-top: 42px;
  margin-bottom: 21px;
  text-align: center;
}

.instructions-title{
  display: inline-flex;
  font-size: 18px;
  color: #0ff;
  font-family: "work sans";
}

.instructions-row{
  margin: 0 auto;
  width: 400px;
}

.instructions-number{
  padding-right: 25px;
  font-family: 'work sans';
  font-size: 36px;
  color: #0ff;
}

.instructions-text{
	padding: 10px;
  font-family: 'work sans';
  font-size: 14px;
  color: #fff;
}

.door-row{
  text-align: center;
}

.door-frame{
  cursor: pointer;
  padding: 10px;
}

.start-row{
  margin: auto;
  width: 120px;
  height: 43px;
  font-family: 'work sans';
  background-color: #eb6536;
  padding-top: 18px;
  font-size: 18px;
  text-align: center;
  color: #010165;
  margin-bottom: 21px;
  cursor: pointer;
}

Javascript

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

let numClosedDoors = 3;

let openDoor1;
let openDoor2;
let openDoor3;

const startButton = document.getElementById('start');

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

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 isClicked = (door) => {
  if(door.src === closedDoorPath){
    return false;
  } else {
    return true;
  }
}

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

const gameOver = status => {
  if(status === 'win'){
    startButton.innerHTML = 'You win! Play again?';
  }
}

const playDoor = () => {
  numClosedDoors--;
  
  if(numClosedDoors === 0){
    gameOver('win');
  }
}

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 if(choreDoor === 2){
    openDoor1 = beachDoorPath;
    openDoor2 = spaceDoorPath;
    openDoor3 = botDoorPath;
  }
}

Please and thankyou.

1 Like
2

I’m able to request the image in your html, the closed-door.svg resource. Going to check your other URLs…

Done. All of the other three images were response code 200 (Success).

That doesn’t help us narrow down the problem, but does suggest an intermittent glitch. Try a refresh and see what happens with a new connection.

1 Like
3

Ive refreshed and reloaded and restarted and still have the same issue :confused:

4

Try moving all the click event listeners to near the bottom of the source listing. Some of the pieces may yet be undefined.

A listener cannot be registered before the callback function if said function is an expression, which is the case here. The functions need to be parsed into memory before any calls to them can be made.

Declared functions are the exception. They are hoisted before the listeners are triggered so do exist.

1 Like
5

same again :no_mouth:

I’m thinking i’ll finish out the coding and ignore the visuals of it for now, because it does seem to be a glitch rather than anything else, right? considering the code itself continues to work as intended.

also the amount of work you put into these forums is valiant and I appreciate you a ton.

1 Like
6

Before we move on, please post the JS you have now and we can give it a closer look. It has to relate to the event listeners and or handlers.

1 Like
7 
const doorImage1 = document.getElementById("door1");
const doorImage2 = document.getElementById("door2");
const doorImage3 = document.getElementById("door3");

let numClosedDoors = 3;

let openDoor1;
let openDoor2;
let openDoor3;

const startButton = document.getElementById('start');

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

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 isBot = () => {
  
}

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

const gameOver = status => {
  if(status === 'win'){
    startButton.innerHTML = 'You win! Play again?';
  }
}

const playDoor = () => {
  numClosedDoors--;
  
  if(numClosedDoors === 0){
    gameOver('win');
  }
}

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 if(choreDoor === 2){
    openDoor1 = beachDoorPath;
    openDoor2 = spaceDoorPath;
    openDoor3 = botDoorPath;
  }
}

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

There’s an empty isBot function in there now, but everything i have functioned as it is supposed to. The button text switches when all the doors are open and etc, which is the bulk of the code.

The image thing only started happening a little bit ago, and i hadn’t changed anything to do with them once it did.

8

We don’t see the line to invoke this function. It should be at the very bottom (for now, to run the test).

4 Likes
9

Oh good lord it’s always something silly isn’t it :upside_down_face:

Think I accidentally deleted it when rewriting another block! You’re a hero.

1 Like
10

Never feel alone in this regard. To err is human, and nobody is immune to that bug. Glad we made it happen. Cheers!

3 Likes
11

You are indeed a hero!
Ive been struggling so long trying to understand why the images wouldn’t load.
Thank you!

1 Like