Chore Door interactive js project

Hey there! Could somebody have a glance pls on this code. I checked it many times over again and again, tried to change the order of elements and its functionality and so on, however not able to find any eventual flaws. I’ve stuck on the point 57 of Part II, when the start button element does not change its content to ‘You win! Play again?’.

Please help! Many thanks!

I have to post in whole script.js over here because link to this file does not generating by browser for some reason.

// Door one, two, three Global variables
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 closedDoorPath = 'https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg';
let numClosedDoors = 3;
let openDoor1;
let openDoor2;
let openDoor3;
const startButton = document.getElementById('start');

// Game logic
const isClicked = (door) => {
    if (door.src === closedDoorPath){
     return false; 
    }
    else {
      return true;
    }
  }
const playDoor = () => {
  numClosedDoor--;
  if (numClosedDoor === 0){
    gameOver('win');
  }
}

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

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

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

randomChoreDoorGenerator();

if i look in the console (f12, then click console), i get an error:

numClosedDoor not defined. Which comes from this line:

numClosedDoor--;

if i then look at the variable declaration:

let numClosedDoors = 3;

i see why this error exist.

2 Likes

thanks a lot! :slight_smile: That was a reason, … it came to misspelling on ‘numClosedDoors’, ‘s’ was missing at the end. Sadly the more you go over the code to check such a tiny flaws, the more chances not to come on it. I wonder why ESLint extension in Visual Studio Code didn’t notice about it.