Chore Door, step 45

I’m on the Chore Door exercise: https://www.codecademy.com/courses/build-interactive-websites/projects/chore-door

I’ve scoured the YouTube walkthrough video, and a few previously posted questions about the same issue, but I still haven’t managed to find where I’m going wrong. My doors no longer activate when clicked (after the section on making it “act like a game.” On step 45, the doors no longer reveal a picture when clicked. I would really, really appreciate any clues as to where I went wrong!

Here is my script.js:

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

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 numClosedDoors = 3;
let openDoor1;
let openDoor2;
let openDoor3;

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

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

randomChoreDoorGenerator();

and here is my index.html:

Chore Door!
<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" alt="simple drawing of a purple door">
  <img id="door2" class="door-frame" src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg" alt="simple drawing of a purple door">
  <img id="door3" class="door-frame" src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg" alt="simple drawing of a purple door">
</div>

<div id="start" class="start-row">
	Good luck!
</div>

<script type="text/javascript" src="script.js"></script>

The problem lies in the randomChoreDoorGeneratortor() function. There is an if/else if/else statement in there thats not completely correct.

I hope you can find where it is going wrong. Here is some info if you get stuck.

1 Like

Thank you. I found that on the else statement, it works if I leave the condition off. I have a question: The video walk-through on YouTube in the 34th minute shows the condition(choreDoor === 2) inside the brackets for the block of code for else. Is that necessary? It seems to work without the condition. I found it confusing when she did that in the video. Thanks SO much!!!

I am not sure if its needed. If it works without it might not be needed, but there could be unforeseen bugs.
The else statement in an if else is always the default code it jumps to, so it might jump to the else for some unforeseen reason you haven’t thought of.

It is important to note that not every if needs an else. you could for example use this format:

if (choreDoor === 0) {
    openDoor1 = botDoorPath;
    openDoor2 = beachDoorPath;
    openDoor3 = spaceDoorPath;
}
else if (choreDoor === 1) {
    openDoor2 = botDoorPath;
    openDoor1 = spaceDoorPath;
    openDoor3 = beachDoorPath;
}
else if (choreDoor === 2) {
    openDoor3 = botDoorPath;
    openDoor1 = beachDoorPath;
    openDoor2 = spaceDoorPath;
}

notice how i made a else if statement of the else instead of removing the expression. This will make sure that if the function runs unexpectedly there is no code to be run since there is no default.

1 Like

There’s no such thing as an else statement. An if statement has an optional else part.

An if statement is if (EXPRESSION) STATEMENT with an optional else STATEMENT
{} is a statement which groups together statements into one statement which can then be used as the statement in an if statement (same for loops)

Thanks for the correction. It’s kind of like learning a foreign language. When I’m asking questions about this stuff, I just hope I can get close enough in the language of my question so that you guys can understand what I’m trying to ask.

Ah, not looking to correct language as such.
If something is a statement then that says a lot about how it can be used.
It also says something about how to figure out how its individual parts work, you can for example look up how an if-statement behaves here:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else

I generally suggest knowing what everything you write does, and what statements and expressions you’re using. Whenever you’re unsure about something, don’t ever guess and shuffle things around (removing condition from else), go look up how they behave instead (there isn’t such a condition at all, that’s not what else does).

Getting the language right comes from knowing what you’re dealing with. Knowing what you’re dealing with comes from only writing things you know what they do. You might in turn need to learn things before you allow yourself to put it in code, that’s fine.
I’m arguing that the questionable moment, the time when something went wrong, is when you put the condition on else, that’s something worth considering, how did you end up writing something you didn’t know what it does, and what should your line of thinking instead have been to have ended up looking it up?

It’s kind of a catch 22. I’m not sure how to learn what things do without actually trying and sometimes making mistakes.

There’ll obviously be mistakes. There’s no way around that.
And I can of course not know how you ended up putting a condition to your else. But if you remember how it happened, then there’s probably something about your method that you can adjust (which is quite valuable progress)
And, refusing to guess or write things you can’t argue for, if that’s something you end up doing, is one way you can cut down mistakes a lot.

P.S. Just saw this instruction on Step 62 of Chore Door:
" …write an else statement that will change the…" so someone might want to look into that.