Choredoor images are showing up with a 404 error

I am stuck on step 45 of the choredoor project which seems pretty common here. When I click on my doors they produce a broken image logo and in the console it shows the 404 error. I have reviewed this many times and have not found a solution. I would greatly appreciate any help!

<!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">
      <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>
    </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>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>
var doorImage1 = document.getElementById("door1");
var doorImage2 = document.getElementById("door2");
var doorImage3 = document.getElementById("door3");
var botDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg"
var beachDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg"
var spaceDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/space.svg"

let numClosedDoors = 3;
let openDoor1;
let openDoor2;
let openDoor3;

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



doorImage1.onclick = () => {
  doorImage1.src = openDoor1;
};

doorImage2.onclick = () => {
  doorImage2.src = openDoor2;
};

doorImage3.onclick = () => {
  doorImage3.src = openDoor3;
};

randomChoreDoorGenerator();

your randomChoreDoorGenerator, you do the following:

    botDoorPath = openDoor1;
    beachDoorPath = openDoor2;
    spaceDoorPath = openDoor3

openDoor1, 2 and 3 are null (or undefined), which you then use/assign to variable holding your image paths. Why?

I never realized I just put them in the wrong order. Everything works as it should now, thanks!

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