Chore Door Project

https://www.codecademy.com/paths/web-development/tracks/build-interactive-websites/modules/web-dev-interactive-websites/projects/chore-door
I couldn’t get the program to work on the Codecademy text editor so I copied all my code into VScode and tried again.
I’m having an issue where once I add the randomChoreDoorGenerator function, the browser can’t find the image src path and the door images won’t change when clicked. I followed the tutorial video perfectly as far as I can tell. My code is as follows:

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

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";

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


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

door1.onclick = () => {
    doorImage1.src = openDoor1;
  };
  door2.onclick = () => {
    doorImage2.src = openDoor2;
  };
  door3.onclick = () => {
    doorImage3.src = openDoor3;
  };

  randomChoreDoorGenerator();


This is supposed to randomly selected a number based on the remaining doors, then according to what number is chosen, the variables ‘openDoor1’,‘openDoor2’, and ‘openDoor3’ are assigned to the image sources.
Once you click the door image in the browser, it should randomly return one of the three images, but when I click, I get the broken image link thumbnail.

1 Like

after clicking your first door and inspecting the html i see:

<img id="door1" class="door-frame" src="undefined">

so we have undefined as source for image, no wonder we get a broken image.

where does the undefined come from? Well, here:

let openDoor1;

when you attempt to set the image paths of your open doors, you create new variable with a local scope. Why?

1 Like

Per the instructions 37-45 in the project, it tells you to create the undefined openDoorX variables. After creating the randomChoreDoorGenerator function, it’s supposed to randomly assign the openDoorX variable to one of the image source variables, botDoorPath, beachDoorPath, or spaceDoorPath.
Then after clicking doorX, it’s src should be assigned to openDoorX.

So you’re saying, because openDoorX is assigned to a variable within the scope of the function, once it’s used in the doorX.onclick function the src becomes undefined?

That makes sense but I just watched the walk-through video for steps 37-45 and it’s completed exactly like what I have in my code, and when she clicks the on the doors the images still appear. I’m assuming I’m missing something obvious but I don’t get it.

Hold on I see what I did. I shouldn’t be using “let” in front of openDoorX within the function.

Good, you figured it out :slight_smile: better then being told the answer. Teaching yourself to take the code apart and understand the problem is a fundamental skill.

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